AngularJS一个页面中的多个NG-应用 [英] AngularJS Multiple ng-app within a page
问题描述
我刚开始学习角JS和创造了一些基本的样本但是我坚持了以下问题。
我已经建立2个模块和2个控制器。
我的购物 - ＆GT; ShoppingCartController
namesList - ＆GT; NamesController
有关联的视图为每个控制器。第一种观点呈现罚款，但二是不渲染。有没有错误。
请帮我解决这个问题。
另外是否有可能在视图中添加控制台检查从控制器传递什么样的价值观。
例如。在以下的div可我们添加的console.log输出控制器值
＆LT; DIV NG-应用=购物车NG控制器=ShoppingCartController＆GT;
＆LT; / DIV＆GT;
由Cherniv提到所以基本上我们需要引导模块在同一页面内有多个NG-应用程序。非常感谢所有的投入。
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆所述; SCRIPT SRC =angular.min.js＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID =App1的NG-应用=购物车NG控制器=ShoppingCartController＆GT;
＆LT; H1＆GT;您的订单＆LT; / H1＆GT;
＆LT; DIV NG重复=项中的项目＆GT;
＆LT;跨度＆GT; {{item.product_name}}＆LT; / SPAN＆GT;
＆LT;跨度＆GT; {{item.price |货币}}＆LT; / SPAN＆GT;
＆LT;按钮NG点击=删除（$指数）;＆GT;删除＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; DIV ID =App2的NG-应用=namesListNG控制器=NamesController＆GT;
＆LT; H1＆GT;家具名字LT名单; / H1＆GT;
＆LT; DIV NG重复=，在名称_姓名＆GT;
＆所述p为H.; {{_ name.username}}＆下; / P＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;脚本＆GT;
VAR shoppingCartModule = angular.module（购物车，[]）
shoppingCartModule.controller（ShoppingCartController
功能（$范围）{
$ scope.items = [
{PRODUCT_NAME：产品1，价格：50}，
{PRODUCT_NAME：产品2，价格：20}，
{PRODUCT_NAME：产品3，价格：180}
];
$ scope.remove =功能（指数）{
$ scope.items.splice（指数，1）;
}
}
）;
VAR namesModule = angular.module（namesList，[]）
namesModule.controller（NamesController
功能（$范围）{
$ scope.names = [
{用户名：尼廷}，
{用户名：穆克什}
];
}
）;
angular.bootstrap（的document.getElementById（App2的），['namesList']）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
I have just started learning Angular JS and created some basic samples however I am stuck with the following problem.
I have created 2 modules and 2 controllers.
shoppingCart -> ShoppingCartController
namesList -> NamesController
There are associated views for each controller. The first View renders fine but second is not rendering. There are no errors.
Please help me solve this issue.
Also is there any possibility to add console in View to check what values are passed from Controller.
e.g. in the following div can we add console.log and output the controller values
<div ng-app="shoppingCart" ng-controller="ShoppingCartController">
</div>
So basically as mentioned by Cherniv we need to bootstrap the modules to have multiple ng-app within the same page. Many thanks for all the inputs.
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<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>
<script>
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>
</body>
</html>
这篇关于AngularJS一个页面中的多个NG-应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
