如何在一个页面中定义两个angular度的应用程序/模块？
我正在尝试将两个angular度的应用程序/模块添加到一个页面。 在下面的小提琴中，您可以看到，始终只有第一个在html代码中引用的模块才能正常工作，而第二个模块不会被angular度识别。
在这个小提琴中，我们只能执行doSearch2方法，而在这个小提琴中只有doSearch方法才能正常工作。
我正在寻找如何正确放置两个angular度模块到一个页面的方式。
每个HTML文档只能有一个AngularJS应用程序自动引导。 在文档中find的第一个ngApp将用于定义作为应用程序自动引导的根元素。 要在HTML文档中运行多个应用程序，您必须使用angular.bootstrap来手动引导它们。 AngularJS应用程序不能相互嵌套。 – http://docs.angularjs.org/api/ng.directive:ngApp
也可以看看
我创build了一个没有ngApp限制的替代指令。 这就是所谓的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/
它基本上与AngularJS在内部使用的代码没有限制。
你为什么要使用多个[ng-app]？ 由于使用模块来恢复Angular，因此可以使用使用多个依赖项的应用程序。
使用Javascript：
// setter syntax -> initializing other module for demonstration angular.module('otherModule', []); angular.module('app', ['otherModule']) .controller('AppController', function () { // ...do something }); // getter syntax angular.module('otherModule') .controller('OtherController', function () { // ...do something });
HTML：
<div ng-app="app"> <div ng-controller="AppController">...</div> <div ng-controller="OtherController">...</div> </div>
编辑
请记住，如果您想在控制器内部使用控制器，则必须使用controllerAs语法，如下所示：
<div ng-app="app"> <div ng-controller="AppController as app"> <div ng-controller="OtherController as other">...</div> </div> </div>
您可以引导多个angular度应用程序，但是：
1）您需要手动引导它们
2）您不应该使用“文档”作为根，而是包含angular接口的节点：
var todoRootNode = jQuery('[ng-controller=TodoController]'); angular.bootstrap(todoRootNode, ['TodoApp']);
这将是安全的。
我为使用多个模块和路由器插件的Angular应用程序制作了POC，以将子应用程序嵌套在单个页面应用程序中。 你可以在https://github.com/AhmedBahet/ng-sub-apps获得源代码;
希望这会有所帮助
手动引导这两个模块将工作。 看这个
<!-- IN HTML --> <div id="dvFirst"> <div ng-controller="FirstController"> <p>1: {{ desc }}</p> </div> </div> <div id="dvSecond"> <div ng-controller="SecondController "> <p>2: {{ desc }}</p> </div> </div> // IN SCRIPT var dvFirst = document.getElementById('dvFirst'); var dvSecond = document.getElementById('dvSecond'); angular.element(document).ready(function() { angular.bootstrap(dvFirst, ['firstApp']); angular.bootstrap(dvSecond, ['secondApp']); });
这里是链接到Plunker http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview
注意：在html中，没有ng-app 。 id已被用来代替。
这可能不是直接的答案。 但是，引导ng-app请注意以下事情。
不要在使用包含ngIf，ngInclude和ngView的指令的元素上引导应用程序。 这样做会使应用程序$ rootElement和应用程序的注入器错位，导致animation停止工作，从应用程序外部无法访问注入器。
有关angular.bootstrap的更多信息，请查看文档 。
- 如何使用量angular器来检查一个元素是否可见？
- 在angularjs ng-change事件中检测checkbox是否被选中
- 如何只允许input一个数字（数字和小数点）？
- Angular-animate – 未知的提供者：$$ asyncCallbackProvider < – $$ asyncCallback < – $ animate < – $ compile
- ng-click在指令的模板中不起作用
- 我如何在我的AngularJS指令testing中模拟点击事件？
- 在Angular中处理Accordion的打开/折叠事件
- 什么是$ $$ hashKey添加到我的JSON.stringify结果
- 在Angular中的unit testing指令控制器，而不使控制器成为全局的
