Javascript 如何在AngularJS中正确设置多个控制器？

我开始使用AngularJS，据我所知，我可以为我的网页的不同部分使用不同的控制器。我很难让它工作。我的页面有两个部分，分别对应于每个

ng controller

-。只有先到的部分才有效。例如，当前，

app1

工作正常，但当我将其移动到

app2

下方时，只有app2工作正常。有什么不对劲吗？非常感谢您对这种行为和任何链接的解释。

我建议使用路由，而不是回答您的实际问题

请注意：这项技术不是解决您的问题所需要的。但是，您可能希望了解它，以便将来进行项目

如果我没弄错的话，您所要做的就是为页面的特定部分使用不同的控制器/视图

要实现这一点，请创建单个应用程序模块（请记住，角度应用程序是有限的）。然后，您可以定义一些路线，并告诉Angular在需要其中一条路线时使用什么：

var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/', {templateUrl: './partials/views/root.html',   controller: 'rootCtrl'}}).

        when('/section', {templateUrl: './partials/views/section.html',   controller: 'sectionCtrl'}}).

        otherwise({redirectTo: '/'});
}]);

进一步阅读：

---

请注意，Angular的最新稳定版本需要ngRoute模块才能使用routeProvider。

您可以有多个控制器，但不能在同一页面上有多个

ng app

指令。这意味着您的html中应该只有一个

ng app

指令，该指令指向将在应用程序中使用的单个模块

然后定义此模块并在此模块中定义所有控制器：

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

一般来说，每个控制器都不需要模块。模块用于将相关的功能组合在一起，以便于在另一个应用程序中重复使用

以下是一些示例的链接：

单模块：

多个模块：

---

请注意，在这两个示例中，页面上只有一个ng应用程序。

看看这个，我改变了很多

无需在页面上设置两个应用程序模块即可实现两个控制器，同一模块中可以有多个控制器。我还简化了语法。看一看

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

---

以下是如何拥有多个控制器：

       var app = angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']);

 app.controller('DemoCtrla', DemoCa)
    .controller('DemoCtrlb', DemoCb)
    .controller('DemoCtrlc', DemoCc);


        function DemoCa($mdConstant) {
                        // function here
                    }

        function DemoCb($mdConstant) {
                        // function here
                    }

        function DemoCc($mdConstant) {
                        // function here
                    }

---

我希望这有帮助；）

我敢肯定，只有你自己手动操作，你才能在一个页面上拥有多个应用程序。我编辑了答案，说你不能有多个ng应用程序指令。这很好，尤其是JSFIDLE，我意识到，属性为ng控制器的s应该嵌套在属性为ng应用程序的父级中。非常感谢你！他真的只是想知道为什么他的榜样被打破了。您不需要使用路由来支持页面上的多个控制器。虽然我理解你的意图，但这确实让事情变得更加混乱。@dtabuenc我有点同意。为了达成妥协，我要指出这一事实，对此表示强烈的感谢！。如果我理解修改后的代码，在一个模块中有两个控制器，页面的每个部分都有一个控制器。我不能有两个不同部分带有控制器的模块吗？如果能给我解释一下代码中的行为，或者给我一些指针，我将不胜感激。它是否与范围阴影有关？是的，您可以拥有另一个具有更多控制器的模块，并通过将该模块导入您的

应用程序
模块来导入这些控制器。（例如，
angular.module（'app'，['app2']）
将允许您的
app
模块访问所有
app2
控制器）