我是 Angularjs 的新手。我在 Angularjs 中尝试了一些代码。但我得到的结果是绑定表达式。
Script.js 显示如下。
/**
*
*/
// <reference path="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js" />
//Create the module
var myApp=angular.module("myModule",[]);
//Create the Controller
var myController=function($scope){
$scope.message="Angular Js Tutorial";
var employee= {
firstname : "Hiroshi",
lastname : "Perera" ,
gender : "Male"
};
$scope.employee=employee;
};
////Register model with the controller. Name of the Controller 'MyController'.
myApp.controller("myController1",myController);
//Creating everything in a single line.
var myApp2=angular
.module("myModule2",[])
.controller("myController2",function($scope){
var father={
firstname: "Lakshman ",
lastname : "Perera",
gender : "Male"
};
$scope.father=father;
});
var myapp3=angular
.module("ModImage",[])
.controller("ControllerFlower",function($scope){
var flowerDetails={
flowerName: "Roses",
Colour : "prik",
flower:"Images/boquet.jpg"
};
$scope.flowerDetails=flowerDetails;
});
以下是html文件。
<!DOCTYPE html>
<html>
head >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="lib/Script.js"></script>
</head>
<body>
<div data-ng-app="">
<div>
10+20={{ 1==2 }}
</div>
<div>
10+20={{ 10+20 }}
</div>
<div>
{{{name:'Hiroshi',age:'28'}.name}}
</div>
<div>
{{ ['Hiro','Thili','Thamali'][1] }}
</div>
</div>
<div ng-controller="myController1" data-ng-app="myModule">
<div>{{message}}</div>
<div>My First Name : {{employee.firstname}}</div>
<div>My Last Name : {{employee.lastname}}</div>
<div>My Gender : {{employee.gender}}</div>
</div>
<div data-ng-app="myModule2" ng-controller="myController2">
<div>Father's First Name : {{father.firstname}}</div>
<div>Father's Last Name : {{father.lastname}}</div>
<div>Father's Gender : {{father.gender}}</div>
</div>
<div data-ng-app="ModImage" ng-controller="ControllerFlower">
<div>Name : {{flowerDetails.flowerName}}</div>
<div>Colour : {{flowerDetails.Colour}}</div>
<div>Image : {{flowerDetails.flower}}</div>
</div>
</body>
</html>
我得到的输出如下。
10+20=false
10+20=30
Hiroshi
Thili
{{message}}
My First Name : {{employee.firstname}}
My Last Name : {{employee.lastname}}
My Gender : {{employee.gender}}
Father's First Name : {{father.firstname}}
Father's Last Name : {{father.lastname}}
Father's Gender : {{father.gender}}
Name : {{flowerDetails.flowerName}}
Colour : {{flowerDetails.Colour}}
Image : {{flowerDetails.flower}}
有人可以让我知道我犯的错误吗？我以多种方式尝试了这个，但仍然无法获得预期的输出。
每个 HTML 文档只能自动引导一个 AngularJS 应用程序。在文档中找到的第一个 ngApp 将用于定义根元素以作为应用程序自动引导。要在 HTML 文档中运行多个应用程序，您必须手动引导它们angular.bootstrap。AngularJS 应用程序不能相互嵌套。
要在同一页面上运行多个 AngularJS 应用程序实例，您必须使用此处所述的手动引导程序。
您需要在script.js文件中添加以下两行
angular.bootstrap(document.getElementById("myModule2"), ['myModule2']);
angular.bootstrap(document.getElementById("ModImage"), ['ModImage']);
请在此处查看 codepen以获取演示。
希望这会帮助你！！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句