Question

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

<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中两个不同模块的程序。

谢谢。

Answer 1

将此代码添加到JavaScript的底部

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

希望这有帮助。

Answer 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/

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

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

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>

使用AngularJS中的两个模块

2 个答案: