在 AngularJS 中使用两个模块答案

【问题标题】：Working with two modules in AngularJS在 AngularJS 中使用两个模块
【发布时间】：2014-07-02 04:08:27
【问题描述】：

我有两个具有不同操作的模块，我尝试使用它们，如下所示。

<div id="viewBodyDiv" ng-app="xhr">
    <div ng-controller="xhrCtrl">
        <button ng-click="callAction()">Click</button>
        {{sample}}
    </div>
</div>
<div id="viewBodyDiv2" ng-app="xhr2">
    <div ng-controller="xhr2Ctrl">
        <button ng-click="alertMessage()">Click</button>
    </div>
</div>

JS如下所示。

angular.module('xhr', []).controller('xhrCtrl', function ($http, $scope, $window) {
    $scope.sample = "sadf";
    $scope.callAction = function () {
        $http({
            method: 'GET',
            url: 'Angular/GetData',
            params: {
                api_key: 'abc'
            }
        }).then(function (obj) { //I get a text result that I display near the button
            $scope.sample = obj.data;  
        });
    };
});
angular.module('xhr2', []).controller('xhr2Ctrl', ['$window','$scope', 
function ($window,$scope) {
    $scope.alertMessage = function () {
        $window.alert("xhr2Ctrl clicked");
    };
}]);

当我点击 viewBodyDiv 时，我得到了所需的输出，但是当我点击 viewBodyDiv2 时，警报消息没有显示出来。

我是 AngularJS 的新手，请告诉我我做错了什么或者在 Angular 中使用两个不同模块的过程是什么。

谢谢。

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

将此代码添加到 JavaScript 的底部

angular.element(document).ready(function() {
  angular.bootstrap(document.getElementById('viewBodyDiv2'),['xhr2']);
});

希望这会有所帮助。

【讨论】：

【解决方案2】：

根据 AngularJS 文档：

https://docs.angularjs.org/api/ng/directive/ngApp

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.

但是，如果你仍然想这样做，你必须手动使用 angular.boostrap() 来实现这一点。这是一个很好的教程：

http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/

因此，您需要引导模块以在同一页面上拥有多个 Angular 应用程序。

您也可以将其中一个模块注入到另一个模块中。

var xhrModule = angular.module("xhr", ["xhr2"]);

以下是引导模块的示例代码。

<html>
<head>
    <script src="angular.min.js"></script>
</head>
<body>
<div id="viewBodyDiv" ng-app="xhr">
    <div ng-controller="xhrCtrl">
        <button ng-click="callAction()">Click</button>
        {{sample}}
    </div>
</div>
<div id="viewBodyDiv2" ng-app="xhr2">
    <div ng-controller="xhr2Ctrl">
        <button ng-click="alertMessage()">Click</button>
    </div>
</div>
<script>
        var xhrModule = angular.module("xhr", []);

        xhrModule.controller('xhrCtrl', function ($http, $scope, $window) {
        $scope.sample = "sadf";
        $scope.callAction = function () {
            $http({
                method: 'GET',
                url: 'Angular/GetData',
                params: {
                    api_key: 'abc'
                }
                }).then(function (obj) { //I get a text result that I display near the button
                    $scope.sample = obj.data;  
               });
            };
        });

        var xhr2Module = angular.module("xhr2", [])
        xhr2Module.controller('xhr2Ctrl', ['$window','$scope', 
        function ($window,$scope) {
            $scope.alertMessage = function () {
                $window.alert("xhr2Ctrl clicked");
            };
        }]);
        angular.bootstrap(document.getElementById("viewBodyDiv2"),['xhr2']);
</script>

【讨论】：

我试图添加最后一行，但它不起作用！我在点击时看不到警报消息