多个ng-app如何在angular中工作(为什么这样的行为?) [英] How multiple ng-app worked in angular (Why such behaviour?)
问题描述
当我给两个ng-app
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>
然后第二个ng-app无法正常工作.
Then second ng-app does not work.
但是当我将第一个ng-app ="A"的范围从div更改为body时，两者都可以正常工作
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>
任何人都可以让我知道为什么这种行为，因为我对棱角还很陌生. 我想知道为什么它会起作用，因为我在第二个中没有调用angular.bootstrap.我尝试搜索，但是当将ng-app的范围从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.
找到相同的> https://jsfiddle.net/maddyjolly2112/wyfd0djp/1/并记住将js复制到相同的.
Find the fiddle for the same https://jsfiddle.net/maddyjolly2112/wyfd0djp/1/ and mind copying the js into the same .
推荐答案
医生说:实例化多个角度应用程序时不要使用ngApp.
无法执行此操作的原因在ngApp的文档中列出了指令.
Docs say: Don't use ngApp when instantiating multiple angular applications.
The reason you can't do this is laid out in the docs for the ngApp directive.
每个HTML文档只能自动引导一个AngularJS应用程序.在文档中找到的第一个ngApp将用于定义根元素以作为应用程序自动引导.要在HTML文档中运行多个应用程序，您必须使用angular.bootstrap手动引导它们. AngularJS应用程序不能相互嵌套.
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.
但是可以引导多个Angular应用...
要引导多个Angular应用，您必须分别引用，并且它们在逻辑上不能嵌套或共享元素；它们需要彼此分开.因此，您不能使用指令ngApp:
But Bootstraping multiple Angular apps is possible...
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>
上面的代码将是您为应用程序执行的操作.然后，您必须确保将控制器分配给正确的角度应用程序(在上例中为app与bApp).
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.
如果您打算嵌套两个Angular应用程序，请执行以下操作:它是可能，但是特定于版本，并且很容易以奇怪的方式破坏. 此Stack Overflow答案对此进行了讨论.
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屋！
