在一个页面中AngularJS多个ng-app
在一个页面中AngularJS多个ng-app
提问于 2013-09-02 18:43:27
我刚刚开始学习Angular JS，并创建了一些基本的示例，但是我遇到了以下问题。
我已经创建了2个模块和2个控制器。
shoppingCart -> ShoppingCartController
namesList -> NamesController每个控制器都有相关的视图。第一个视图渲染良好，但第二个视图不渲染。没有错误。
请帮我解决这个问题。
此外，是否有可能在视图中添加控制台，以检查从控制器传递的值。
例如，在下面的div中，我们是否可以添加console.log并输出控制器值
<div ng-app="shoppingCart" ng-controller="ShoppingCartController">
</div>回答 9
Stack Overflow用户
回答已采纳
发布于 2013-09-03 10:44:22
所以基本上，正如Cherniv所提到的，我们需要引导模块，以便在同一页面中有多个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>
Stack Overflow用户
发布于 2016-04-23 22:39:04
在我的例子中，我必须将我的第二个应用程序的引导程序包装在angular.element(document).ready中，才能让它工作：
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById("app2"), ["app2"]);
}); Stack Overflow用户
发布于 2016-05-13 17:46:06
下面是一个html页面中的两个应用程序和一个应用程序中的两个conrollers的示例：
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18571301
复制相关文章
相似问题
腾讯云开发者
