多个ng应用程序是如何在angular中工作的(为什么会有这样的行为?）

How multiple ng-app worked in angular (Why such behaviour?)

本文关键字：为什么 多个 应用程序 工作 angular ng      更新时间：2023-09-26

我尝试在一个应用程序中给出两个ng应用程序，当我给出两个像一样的ng应用程序时

 <body>
    <div ng-app="A">
        <div ng-controller="AC">
        </div>
    </div>

    <div ng-app="B">
        <div ng-controller="BC">
        </div>
    </div>
</body>

然后第二个ng应用程序不起作用。

但是，当我将第一个ng-app="A"的范围从div更改为body时，两者都可以像一样正常工作

<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应用程序的范围从div更改为body时，我不知道它是如何工作的。

找到同样的小提琴https://jsfiddle.net/maddyjolly2112/wyfd0djp/1/并介意将js复制到同一个中。

文档说：在实例化多个角度应用程序时不要使用ngApp

ngApp指令的文档中列出了不能执行此操作的原因。

每个HTML文档只能自动启动一个AngularJS应用程序。文档中找到的第一个ngApp将用于定义根元素，以将其自动引导为应用程序。要在HTML文档中运行多个应用程序，必须使用angular.bootstrap手动引导它们。AngularJS应用程序不能相互嵌套。

但是引导多个Angular应用程序是可能的

要引导多个Angular应用程序，必须引用每个应用程序，并且它们在逻辑上不能嵌套或共享一个元素；它们需要彼此分开。因此，您不能使用指令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）

但不要给它们筑巢

当你嵌套它们时，你声称它"有效"，但你应该意识到它不起作用，只是不会崩溃。不要嵌套多个角度应用程序。您会遇到一些奇怪的问题，特别是如果您有多个名称相同的变量绑定到$rootScope。

但你可以在没有不良影响的情况下筑巢，对吧

如果您打算嵌套两个Angular应用程序；这是可能的，但非常特定于版本，很容易以奇怪的方式破坏。这个Stack Overflow的答案说明了这一点。

来自Angular的官方文档：

每个HTML文档只能自动启动一个AngularJS应用程序。文档中找到的第一个ngApp将用于定义根元素，以将其自动引导为应用程序要在HTML文档中运行多个应用程序，必须使用angular.bootstrap手动引导它们。AngularJS应用程序不能相互嵌套。

来源：https://docs.angularjs.org/api/ng/directive/ngApp

如果问题是：为什么第二个例子有效而不是第一个，答案在上面的链接中>Angular需要将第一个ngApp放置在页面的根元素（html或body）附近。

正如George所提到的，手动引导将起作用。在html中，使用id而不是ng-app。

脚本中

var dvFirst = document.getElementById('dvFirst');
var dvSecond = document.getElementById('dvSecond');
angular.element(document).ready(function() {
   angular.bootstrap(dvFirst, ['firstApp']);
   angular.bootstrap(dvSecond, ['secondApp']);
});

这是一个正在工作的plunkerhttp://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview

相关文章：