javascript - 如何在 AngularJS 中正确设置多个 Controller ？

Question

我刚开始使用 AngularJS，据我所知，我可以为网页的不同部分设置不同的 Controller 。我在让它工作时遇到问题。我的页面有两个部分，每个部分对应于 ng-controller - JSFiddle .只有最先出现的部分有效。例如，目前 app1 工作正常，但是当我将它移到 app2 下面时，只有 app2 工作正常。有什么问题吗？非常感谢有关此行为原因和任何链接的任何解释。

Answer 1

你可以有多个 Controller ，但你不能在同一个页面上有多个 ng-app 指令。这意味着您的 html 中应该只有一个 ng-app 指令指向将在您的应用程序中使用的单个模块。

然后您定义此模块并在此模块中定义所有 Controller :

var app = angular.module('app', []);

app.controller('TextController', function ($scope) {
    //Controller Code Here    
});

app.controller('ItemController', function ($scope) {
    //Controller Code Here
});

如果出于某种原因你想在单独的模块中使用 Controller ，你仍然可以这样做，并将这些模块作为主模块的依赖项包含在内:

var items = angular.module('items', []);
var text = angular.module('text', []);
var app = angular.module('app', ['items', 'text']);


text.controller('TextController', function ($scope) {
    //Controller Code Here
});

items.controller('ItemController', function ($scope) {
    //Controller Code Here
});

通常您不需要为每个 Controller 配备一个模块。模块用于将相关的功能 block 组合在一起，以便轻松获取并在另一个应用程序中重复使用。

以下是一些示例的链接:

单模块:http://jsfiddle.net/36s7q/4/

多个模块:http://jsfiddle.net/36s7q/5/

请注意，在这两个示例中，页面上只有一个 ng-app。