我尝试在一个应用程序中提供两个 ng-app ，当我提供两个 ng-app 就像
<div ng-app="A"><div ng-controller="AC"><div ng-app="B"><div ng-controller="BC">
然后第二个 ng-app 不起作用.
但是当我将第一个 ng-app="A" 的范围从 div 更改为 body 时，两者都可以像
一样正常工作<div><div ng-controller="AC"><div ng-app="B"><div ng-controller="BC">
谁能告诉我为什么会出现这种行为，因为我对 angular 很陌生.我想知道它为什么起作用，因为我没有在第二个调用 angular.bootstrap.我尝试搜索，但在将 ng-app 的范围从 div 更改为 body 时，我不知道它是如何工作的.
找到相同的小提琴 https://jsfiddle.net/maddyjolly2112/wyfd0djp/1/ 并介意将 js 复制到同一个 .
ngApp.你不能这样做的原因在 ngApp 的文档中列出指令.
<块引用>每个 HTML 文档只能自动引导一个 AngularJS 应用程序.在文档中找到的第一个 ngApp 将用于定义根元素以作为应用程序自动引导.要在 HTML 文档中运行多个应用程序，您必须使用 angular.bootstrap 手动引导它们.AngularJS 应用程序不能相互嵌套.
要引导多个 Angular 应用，您必须引用每个，并且它们在逻辑上不能嵌套，也不能共享一个元素；他们需要彼此分开.因此，您不能使用指令 ngApp:
<头></头><身体><script src="angular.js"></script><div id="appElementA"></div><div id="appElementB"></div><脚本>var app = angular.module('A', []).controller('AB', function($scope) {$scope.greeting = '欢迎！';});var appElementA = document.getElementById('divAppA');angular.bootstrap(appElementA, ['A']);var bApp = angular.module('B', []).controller('BB', function($scope) {$scope.greeting = '欢迎使用 B 应用程序！';});var appElementB = document.getElementById('divAppB');angular.bootstrap(appElementB, ['B']);</html>上面的代码将是您为应用程序执行的方式.然后，您必须确保将控制器分配给正确的 Angular 应用程序(app 与 bApp，在上面的示例中.)
您在嵌套它们时声称它有效"，但您应该注意它不起作用，它只是不会严重崩溃.不要嵌套多个 Angular 应用程序.你会遇到奇怪的问题，特别是如果你有多个变量命名相同的绑定到 $rootScope.
如果您打算嵌套两个 Angular 应用程序；它可能，但非常特定于版本并且容易以奇怪的方式破坏.此 Stack Overflow 回答对此进行了讨论.
<块引用>I tried giving two ng-app in an application , when i gave two ng-app like
<body>
<div ng-app="A">
<div ng-controller="AC">
</div>
</div>
<div ng-app="B">
<div ng-controller="BC">
</div>
</div>
</body>
Then second ng-app does not work.
But when i change the scope of first ng-app="A" from div to body then both works fine like
<body ng-app="A">
<div>
<div ng-controller="AC">
</div>
</div>
<div ng-app="B">
<div ng-controller="BC">
</div>
</div>
</body>
Can anyone let me know why this behavior as i am quite new to angular. I wanted to know why it worked as i didn't called angular.bootstrap on the second one.I tried searching but i didn't got how it is working when changing the scope of ng-app from div to body.
Find the fiddle for the same https://jsfiddle.net/maddyjolly2112/wyfd0djp/1/ and mind copying the js into the same .
ngApp when instantiating multiple angular applications.The reason you can't do this is laid out in the docs for the ngApp directive.
Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.
To bootstrap multiple Angular apps, you have to reference each, and they logically can't be nested, or sharing an element; they need to be separate from each other. Because of this, you cannot use the directive, ngApp:
<html>
<head></head>
<body>
<script src="angular.js"></script>
<div id="appElementA"></div>
<div id="appElementB"></div>
<script>
var app = angular.module('A', [])
.controller('AB', function($scope) {
$scope.greeting = 'Welcome!';
});
var appElementA = document.getElementById('divAppA');
angular.bootstrap(appElementA, ['A']);
var bApp = angular.module('B', [])
.controller('BB', function($scope) {
$scope.greeting = 'Welcome to B app!';
});
var appElementB = document.getElementById('divAppB');
angular.bootstrap(appElementB, ['B']);
</script>
</body>
</html>
The above code would be how you'd do it for your apps. You'd then have to be sure you're assigning the controllers to the right angular application (app vs bApp, in the above example.)
You claim it 'works' when you nest them, but you should be aware that it doesn't work, it just doesn't crash hard. Don't have multiple angular applications nested. You'll encounter weird issues, especially if you have multiple variables named the same bound to the $rootScope.
If you're intent on having two Angular apps nested; it's possible but extremely version specific and liable to break in weird ways. This Stack Overflow answer talks about it.
这篇关于多个 ng-app 如何在 angular 中工作(为什么会有这种行为?)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
