我开始使用 AngularJS 开发我的第一个大项目，在考虑应用程序的设计时，我发现了一些我不理解的东西。
我考虑的是单页应用，所以我使用 ng-view 和 routeProvider 将每个查询路由到正确的模板和 Controller 。然而，我的一些模板有点复杂，我首先想到使用不同的 Controller 来管理每个模板。也就是说，同一模板的不同部分将由不同的 Controller 管理。问题(或者至少，我认为是问题所在)是 routeProvider 只允许将一个模板关联到一个 Controller 。这让我觉得除了我在使用 routeProvider 的路由配置中指定的 Controller 之外，我不能将另一个 Controller 用于模板。
然后我开始想办法重构 future 的项目，这样我就可以在由单个 Controller 管理的同一模板中维护每个不同的功能，并且仍然让它们之间的 Controller 交互。
在经历了一些头痛之后，我决定尝试实现我的第一种方法，看看它是如何失败的，以及……多么令人惊讶!它工作得很好!但是，我不知道为什么。
让我向您展示这个简单的例子:
script.js
angular.module('myApp', [
'ngRoute'
])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'main',
controller: 'MainCtrl'
});
$locationProvider.html5Mode(true);
});
angular.module('myApp')
.controller('MainCtrl', function ($scope) {
// whatever...
});
});
angular.module('myApp')
.controller('FirstCtrl', function ($scope) {
$scope.first = function(){
alert("First");
};
});
});
angular.module('myApp')
.controller('SecondCtrl', function ($scope) {
$scope.second= function(){
alert("Second");
};
});
});
main.html
<div ng-controller="FirstCtrl">
<button ng-click="first()">First!</button>
</div>
<div ng-controller="SecondCtrl">
<button ng-click="second()">Second!</button>
</div>
index.html
<body ng-app="myApp">
<div ng-view=""></div>
</body>
我认为如果您将路由配置为将“主”模板关联到“MainCtrl” Controller ，那将是与模板交互的唯一 Controller ，但事实并非如此。
我最初以为找不到“first”和“second”函数，因为“FirstCtrl”和“SecondCtrl”没有在路由配置中声明。我认为 routeProvider 可能会“包装”(或类似的东西)“主”模板和“MainCtrl” Controller ，而“主”模板将无法访问其余 Controller 。
但这不正确，来自不同 Controller 的“第一”和“第二”功能可以正常工作。那么，在路由配置中为模板指定 Controller 有什么意义？您可以只设置一个模板来呈现指定的查询，并且该模板可以使用模块的任何 Controller 。
也许这不是一个好的设计，我不知道。
你能帮助我更好地理解这一点吗？
谢谢!
最佳答案
如您所述使用 $route 提供程序时:
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'main',
controller: 'MainCtrl'
});
$locationProvider.html5Mode(true); });
您实际上将所有内容包装在 './' 中使用 MainCrtl 进行路由。
因此，当您在 <div ng-view=></div> 中注入(inject) Main.html View 时你得到以下渲染:
<body ng-app="myApp">
<div ng-controller='MainCtrl'>
<div ng-controller="FirstCtrl">
<button ng-click="first()">First!</button>
</div>
<div ng-controller="SecondCtrl">
<button ng-click="second()">Second!</button>
</div>
</div>
</body>
关于javascript - 使用 routeProvider 的模板的多个 Controller ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22273882/