Question

我要在同一页面上声明两个具有不同名称的ng-app，但是在两个ng-app中，我都必须为两个ng-app使用同名的通用ng-controller。但是我没有得到想要的输出。这只是初始化第一个ng-controller。

我尝试过：只有一个ng-app> ng-controller很好，但是如果您先跳过ng-app> ng-controller（即：var modules = ['secondScope'];）并尝试第二次初始化，那就是在控制台中显示错误。

HTML：

<body>
<div ng-app="firstScope">
    <div ng-controller="classController">
      <div>{{name}}</div>
    </div> 
</div>

<div ng-app="secondScope">
    <div ng-controller="classController">
      <div>{{name}}</div>
    </div>
</div>
</body>

脚本：

var modules = ['firstScope', 'secondScope'];

angular.forEach(modules, function(mod){
    console.log(mod);
    var myApp = angular.module(mod, []);
    myApp.controller('classController', classController);
});

function classController($scope) {
    console.log('classController');
    $scope.name = "Child 1 Controller";
};

Answer 1

问题不在于控制器的初始化，而在于模块，因为angular仅自动初始化一个应用程序。对于其他应用，您需要按以下步骤手动对其进行初始化。

var modules = ['firstScope', 'secondScope'];

angular.forEach(modules, function(mod){
    console.log(mod);
    var myApp = angular.module(mod, []);
    myApp.controller('classController', classController);
});

 // manually initializing the app
angular.bootstrap(document.getElementById('secondApp'), ['secondScope']);

function classController($scope) {
    console.log('classController');
    $scope.name = "Child 1 Controller";
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
<div ng-app="firstScope">
    <div ng-controller="classController">
      <div>{{name}}</div>
    </div> 
</div>

<div ng-app="secondScope" id="secondApp">
    <div ng-controller="classController">
      <div>{{name}}</div>
    </div>
</div>

在不同的ng-app中具有相同名称的ng-controller无法正常工作

1 个答案: