如何正确使用AngularJS中的多个控制器？

Question

我开始使用AngularJS,据我所知,我可以为我的网页的不同部分设置不同的控制器.我有问题让它工作.我的页面有两个部分,每个部分对应一个ng-controller- JSFiddle.只有先到的部分才有效.例如目前,app1工作正常,但当我在下面移动时app2,只有app2工作正常.可能有什么不对？非常感谢有关此行为和任何链接的原因的任何解释.

Answer 1

您可以拥有多个控制器,但不能ng-app在同一页面上拥有多个指令.这意味着您ng-app的html中只应该有一个指令指向将在您的应用程序中使用的单个模块.

然后,您可以定义此模块并在此模块中定义所有控制器:

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

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

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

如果出于某种原因,您希望将控制器放在单独的模块中,您仍然可以这样做,并将这些模块作为主模块的依赖项包含在内:

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
});

通常,您不需要为每个控制器配备模块.模块用于将相关的功能组合在一起,以便于在另一个应用程序中使用它并重新使用它.

以下是一些示例的链接:

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

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

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

Answer 2

看看这个,我改变了很多.http://jsfiddle.net/36s7q/6/

页面上不需要两个app模块来实现两个控制器,你可以在同一个模块中有多个控制器.我还简化了语法.看一看.

var items = angular
.module('app1', [])
.controller('ItemController', function($scope) {
$scope.items = [ {
    title : 'Pencil',
    quantity : 8,
    price : 4.2
}, {
    title : 'Pen',
    quantity : 2,
    price : 5.2
}, {
    title : 'Watch',
    quantity : 3,
    price : 10.2
} ];
})
.controller('TextController', function($scope) {
$scope.text = {
    message : 'Welcome!!'
};
});