如何在一个页面中定义两个角度的应用程序/模块？

javascript angularjs

2022-08-30 05:15:24

我正在尝试将两个角度应用程序/模块添加到一个页面。在下面的小提琴中，您可以看到始终只有html代码中引用的第一个模块才能正常工作，而第二个模块则无法通过angular识别。

在这个小提琴中，我们只能执行方法，而在这个小提琴中，只有方法才能正常工作。doSearch2doSearch

我正在寻找如何将两个角度模块正确放置在一个页面中的方法。

答案 1

每个 HTML 文档只能自动引导一个 AngularJS 应用程序。在文档中找到的第一个 ngApp 将用于定义要自动引导为应用程序的根元素。要在 HTML 文档中运行多个应用程序，您必须改用 angular.bootstrap 手动引导它们。AngularJS应用程序不能相互嵌套。-- http://docs.angularjs.org/api/ng.directive:ngApp

另请参见

答案 2

我创建了一个没有限制的替代指令。它被称为.这是您使用它时代码的样子：ngAppngModule

<!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内部使用的相同代码，没有限制。