AngularJS在一个页面内多个ng-app
我刚开始学习Angular JS，并创build了一些基本的样本，但是我坚持下面的问题。
我创build了2个模块和2个控制器。
shoppingCart -> ShoppingCartController namesList -> NamesController 每个控制器都有相关的视图。 第一个视图呈现正常，但第二个不呈现。 没有错误。
http://jsfiddle.net/ep2sQ/
请帮我解决这个问题。
也有可能在View中添加控制台来检查从Controller传递的值。
例如在下面的div中，我们可以添加console.log并输出控制器值
<div ng-app="shoppingCart" ng-controller="ShoppingCartController"> </div>
所以基本上如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>
要在HTML文档中运行多个应用程序，您必须使用angular.bootstrap（）手动引导它们
HTML
<!-- Automatic Initialization --> <div ng-app="myFirstModule"> ... </div> <!-- Need To Manually Bootstrap All Other Modules --> <div id="module2"> ... </div>
JS
angular. bootstrap(document.getElementById("module2"), ['mySecondModule']);
这是因为每个HTML文档只能自动引导一个AngularJS应用程序。 在文档中find的第一个ng-app将被用来定义作为应用程序自动引导的根元素。
换句话说，尽pipe技术上可以在每个页面上有多个应用程序，但是Angular框架只会自动实例化和初始化一个ng-app指令。
你可以直接使用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() 。
您可以在一个rootModule中合并多个模块，并将该模块作为ng-app指定给上级元素ex：body标签。
代码例如：
<!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>
在我的情况下，我不得不包裹在angular.element(document).ready第二个应用程序的引导，以使其工作：
angular.element(document).ready(function() { angular.bootstrap(document.getElementById("app2"), ["app2"]); });
下面是一个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>
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" }]; } ); var namesModule = angular.module("namesList2", []) namesModule.controller("NamesController", function($scope) { $scope.names = [{ username: "Nitin" }, { username: "Mukesh" }]; } ); angular.element(document).ready(function() { angular.bootstrap(document.getElementById("App2"), ['namesList']); angular.bootstrap(document.getElementById("App3"), ['namesList2']); });
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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> <div id="App3" ng-app="namesList2" ng-controller="NamesController"> <h1>List of Names</h1> <div ng-repeat="_name in names"> <p>{{_name.username}}</p> </div> </div> </body> </html>
你可以定义一个Root ng-App，在这个ng-App中你可以定义多个nd-Controler。 喜欢这个
<!DOCTYPE html> <html> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> <style> table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f2f2f2; } table tr:nth-child(even) { background-color: #ffffff; } </style> <script> var mainApp = angular.module("mainApp", []); mainApp.controller('studentController1', function ($scope) { $scope.student = { firstName: "MUKESH", lastName: "Paswan", fullName: function () { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; }); mainApp.controller('studentController2', function ($scope) { $scope.student = { firstName: "Mahesh", lastName: "Parashar", fees: 500, subjects: [ { name: 'Physics', marks: 70 }, { name: 'Chemistry', marks: 80 }, { name: 'Math', marks: 65 }, { name: 'English', marks: 75 }, { name: 'Hindi', marks: 67 } ], fullName: function () { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; }); </script> <body> <div ng-app = "mainApp"> <div id="dv1" ng-controller = "studentController1"> Enter first name: <input type = "text" ng-model = "student.firstName"><br/><br/> Enter last name: <input type = "text" ng-model = "student.lastName"><br/> <br/> You are entering: {{student.fullName()}} </div> <div id="dv2" ng-controller = "studentController2"> <table border = "0"> <tr> <td>Enter first name:</td> <td><input type = "text" ng-model = "student.firstName"></td> </tr> <tr> <td>Enter last name: </td> <td> <input type = "text" ng-model = "student.lastName"> </td> </tr> <tr> <td>Name: </td> <td>{{student.fullName()}}</td> </tr> <tr> <td>Subject:</td> <td> <table> <tr> <th>Name</th>. <th>Marks</th> </tr> <tr ng-repeat = "subject in student.subjects"> <td>{{ subject.name }}</td> <td>{{ subject.marks }}</td> </tr> </table> </td> </tr> </table> </div> </div> </body> </html>
只有一个应用程序被自动初始化。 其他人必须手动初始化如下：
句法：
angular.bootstrap(element, [modules]);
例：
<!DOCTYPE html> <html> <head> <script src="1.5.8/angular.js" data-semver="1.5.8" data-require="angular.js@1.5.8"></script> <script data-require="ui-router@0.2.18" data-semver="0.2.18" src="//cdn.rawgit.com/angular-ui/ui-router/0.2.18/release/angular-ui-router.js"></script> <link rel="stylesheet" href="style.css" /> <script> var parentApp = angular.module('parentApp', []) .controller('MainParentCtrl', function($scope) { $scope.name = 'universe'; }); var childApp = angular.module('childApp', ['parentApp']) .controller('MainChildCtrl', function($scope) { $scope.name = 'world'; }); angular.element(document).ready(function() { angular.bootstrap(document.getElementById('childApp'), ['childApp']); }); </script> </head> <body> <div id="childApp"> <div ng-controller="MainParentCtrl"> Hello {{name}} ! <div> <div ng-controller="MainChildCtrl"> Hello {{name}} ! </div> </div> </div> </div> </body> </html>
我已经修改了你的jsfiddle，可以为其余的模块创build最顶级的模块作为rootModule。 下面修改更新你的jsfiddle。
- 第二个模块可以注入RootModule。
- 在第二个定义ng-app放在根ng-app内。
Updated JsFiddle: http Updated JsFiddle: //jsfiddle.net/ep2sQ/1011/
<html> <head> <script src="angular.min.js"></script> </head> <body> <div ng-app="shoppingCartParentModule" > <div 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 ng-controller="NamesController"> <h1>List of Names</h1> <div ng-repeat="name in names"> <p>{{name.username}}</p> </div> </div> </div> </body> <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.module("shoppingCartParentModule",["shoppingCart","namesList"]) </script> </html>
