在AngularJS中使用两个模块_Angularjs_Angularjs Directive

在AngularJS中使用两个模块

angularjs

在AngularJS中使用两个模块,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我有两个具有不同操作的模块，我尝试使用它们，如下所示 <div id="viewBodyDiv" ng-app="xhr"> <div ng-controller="xhrCtrl"> <button ng-click="callAction()">Click</button> {{sample}} </div> </div> <div id="viewBodyDiv2"

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

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

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新手，请告诉我我做错了什么，或者在AngularJS中使用两个不同模块的过程有什么问题。

谢谢。

根据AngularJS文档：

每个HTML文档只能自动引导一个AngularJS应用程序。文档中找到的第一个ngApp将用于将根元素定义为应用程序自动引导。

但是，如果您仍然希望这样做，则必须手动使用angular.boostrap（）来实现这一点。以下是一个很好的教程：

因此，您需要引导模块在同一页面上有多个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>


点击
{{sample}}
点击
var xhrModule=angular.module（“xhr”，[]）；
控制器（'xhrCtrl'，函数（$http，$scope，$window）{
$scope.sample=“sadf”；
$scope.callAction=函数（）{
$http({
方法：“GET”，
url:'角度/获取数据'，
参数：{
api_键：“abc”
}
}).then（function（obj）{//我得到一个文本结果，显示在按钮附近
$scope.sample=obj.data；
});
};
});
var xhr2 module=angular.module（“xhr2”，[]）
xhr2Module.controller（'xhr2Ctrl'，['$window'，'$scope'，'，
函数（$window$scope）{
$scope.alertMessage=函数（）{
$window.alert（“xhr2Ctrl单击”）；
};
}]);
bootstrap（document.getElementById（“viewBodyDiv2”），['xhr2']）；


将此代码添加到JavaScript的底部
angular.element(document).ready(function() {
  angular.bootstrap(document.getElementById('viewBodyDiv2'),['xhr2']);
});

希望这能有所帮助。
我试图添加最后一行，但它不起作用！单击后，我看不到警告消息