我刚开始学习Angular JS并创建了一些基本样本,但是我遇到了以下问题.
我创建了2个模块和2个控制器.
shoppingCart -> ShoppingCartController
namesList -> NamesController
每个控制器都有相关的视图.第一个视图呈现正常,但第二个不呈现.没有错误.
请帮我解决这个问题.
也有可能在View中添加控制台以检查从Controller传递的值.
例如,在下面的div中我们可以添加console.log并输出控制器值
<div ng-app="shoppingCart" ng-controller="ShoppingCartController">
</div>
Nit*_*esh 187
所以基本上如切尔尼夫所提到的,我们需要引导模块在同一页面中拥有多个ng-app.非常感谢所有的投入.
var shoppingCartModule = angular.module("shoppingCart", [])
shoppingCartModule.controller("ShoppingCartController",
function($scope) {
$scope.items = [{
product_name: "Product 1",
price: 50
}, {
product_name: "Product 2",
price: 20
}, {
product_name: "Product 3",
price: 180
}];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
);
var namesModule = angular.module("namesList", [])
namesModule.controller("NamesController",
function($scope) {
$scope.names = [{
username: "Nitin"
}, {
username: "Mukesh"
}];
}
);
angular.bootstrap(document.getElementById("App2"), ['namesList']);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
<h1>Your order</h1>
<div ng-repeat="item in items">
<span>{{item.product_name}}</span>
<span>{{item.price | currency}}</span>
<button ng-click="remove($index);">Remove</button>
</div>
</div>
<div id="App2" ng-app="namesList" ng-controller="NamesController">
<h1>List of Names</h1>
<div ng-repeat="_name in names">
<p>{{_name.username}}</p>
</div>
</div>Alw*_*ner 120
<!-- Automatic Initialization -->
<div ng-app="myFirstModule">
...
</div>
<!-- Need To Manually Bootstrap All Other Modules -->
<div id="module2">
...
</div>
angular.
bootstrap(document.getElementById("module2"), ['mySecondModule']);
原因是每个HTML文档只能自动引导一个AngularJS应用程序.ng-app在文档中找到的第一个将用于定义作为应用程序自动引导的根元素.
换句话说,虽然技术上每页可以有多个应用程序,但只有一个ng-app指令将由Angular框架自动实例化和初始化.
Lui*_*rez 41
你可以angular.bootstrap()直接使用......问题是你失去了指令的好处.
首先,您需要获取对HTML元素的引用以引导它,这意味着您的代码现在已经与您的HTML相关联.
其次,两者之间的联系并不明显.有了ngApp你可以清楚地看到HTML是什么模块相关联,你知道去哪里找这方面的资料.但是angular.bootstrap()可以从代码中的任何位置调用.
如果您打算以最好的方式完成它将使用指令.这就是我做的.它被称为ngModule.以下是您的代码使用它的样子:
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="angular.ng-modules.js"></script>
<script>
var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) {
$scope.name = "Bob A";
});
var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) {
$scope.name = "Steve B";
});
</script>
</head>
<body>
<div ng-modules="MyModuleA, MyModuleB">
<h1>Module A, B</h1>
<div ng-controller="MyControllerA">
{{name}}
</div>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
<div ng-module="MyModuleB">
<h1>Just Module B</h1>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
</body>
</html>
您可以在以下位置获取源代码:
http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/
它的实现方式与ngApp.相同.它只是angular.bootstrap()在幕后调用.
在我的情况下,我必须包装我的第二个应用程序的引导,angular.element(document).ready以使其工作:
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById("app2"), ["app2"]);
});
小智 7
以下是一个html页面中的两个应用程序和一个应用程序中的两个控制器的示例:
<div ng-app = "myapp">
<div ng-controller = "C1" id="D1">
<h2>controller 1 in app 1 <span id="titre">{{s1.title}}</span> !</h2>
</div>
<div ng-controller = "C2" id="D2">
<h2>controller 2 in app 1 <span id="titre">{{s2.valeur}}</span> !</h2>
</div>
</div>
<script>
var A1 = angular.module("myapp", [])
A1.controller("C1", function($scope) {
$scope.s1 = {};
$scope.s1.title = "Titre 1";
});
A1.controller("C2", function($scope) {
$scope.s2 = {};
$scope.s2.valeur = "Valeur 2";
});
</script>
<div ng-app="toapp" ng-controller="C1" id="App2">
<br>controller 1 in app 2
<br>First Name: <input type = "text" ng-model = "student.firstName">
<br>Last Name : <input type="text" ng-model="student.lastName">
<br>Hello : {{student.fullName()}}
<br>
</div>
<script>
var A2 = angular.module("toapp", []);
A2.controller("C1", function($scope) {
$scope.student={
firstName:"M",
lastName:"E",
fullName:function(){
var so=$scope.student;
return so.firstName+" "+so.lastName;
}
};
});
angular.bootstrap(document.getElementById("App2"), ['toapp']);
</script>
<style>
#titre{color:red;}
#D1{ background-color:gray; width:50%; height:20%;}
#D2{ background-color:yellow; width:50%; height:20%;}
input{ font-weight: bold; }
</style>
小智 6
您可以在一个rootModule中合并多个模块,并将该模块作为ng-app分配给上级元素ex:body标记.
代码ex:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="namesController.js"></script>
<script src="myController.js"></script>
<script>var rootApp = angular.module('rootApp', ['myApp1','myApp2'])</script>
<body ng-app="rootApp">
<div ng-app="myApp1" ng-controller="myCtrl" >
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<div ng-app="myApp2" ng-controller="namesCtrl">
<ul>
<li ng-bind="first">{{first}}
</li>
</ul>
</div>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
232363 次 |
| 最近记录： |