使用 routeprovider angularjs 为一个视图使用两个控制器答案

【问题标题】：using two controllers for one view using routeprovider angularjs使用 routeprovider angularjs 为一个视图使用两个控制器
【发布时间】：2016-01-20 20:05:03
【问题描述】：

可以使用 roteProvider 为一个视图使用两个不同的控制器

类似这样的：

angular.module('myApp', 'ui.router', 'ui.bootstrap', 'indexedDB', 'ngOrderObjectBy']).config(function ($stateProvider, $urlRouterProvider, $indexedDBProvider) {

$urlRouterProvider.otherwise("/student");

$stateProvider
    .state('studentId', {
        url: "/student/:studentId/:classId",
        templateUrl: "views/Student/Student.html",
          controller:'StudentCtrl'
    })
    .state('modules', {
        url: "/modules",
        templateUrl: "views/modules/modules.html",
          controller:'studentCtrl',
          controller:'modulesCtrl'          
 });

【问题讨论】：

好吧，不是那样，modulesCtrl 是要使用的，因为它是最后一个被声明的，你可以使用任意数量的控制器，但据我所知，只有一个要在路由中声明，要“下线”使用更多控制器，请直接使用 ng-controller 指令。 stackoverflow.com/questions/25061540/…

标签： angularjs angular-ui-router

【解决方案1】：

你不能用这种方式定义两个控制器，你传递给.state的第二个参数是一个javascript对象，它的键是唯一的。尝试打开浏览器控制台并执行以下操作：

> var obj = {"view":"a", "controller":"CA", "controller":"CB"}
> obj
< Object {view: "a", controller: "CB"}

您会看到只保存了最后一个键/值。

回到问题，我认为您可以在模板中应用第二个控制器。在配置中，您将拥有：

$stateProvider
    .state('studentId', {
       ...
    })
    .state('modules', {
        url: "/modules",
        templateUrl: "views/modules/modules.html",
        controller:'modulesCtrl'          
 });

在模板中：

<div class="modules">
    ...
    <div class="students" ng-controller="studentCtrl">
        ...
    </div>
    ...
</div>

【讨论】：

【解决方案2】：

您可以使两个状态成为共同父抽象状态的子状态。唯一的缺点是抽象状态必须有一个 URL，它会出现。 URL 可以是简单的东西（例如“/a”）或描述两个模块的东西。

为什么视图共享一个控制器？功能是否在控制器中实现？当前常见的 Angular 编码标准适用于将存储在工厂/服务中的函数和对象映射到视图的瘦控制器。大概您的每个州都有一个独特的控制器，它将功能从一个或多个工厂映射到视图。然后控制器将只包含到视图中实际使用的变量或函数的映射。

但是，如果您单独定义函数，您可以将控制器添加到控制器：

angular.module('MyApp', [])

.controller('Ctrl1', Ctrl1)
  .controller('Ctrl2', Ctrl2)
  .controller('Ctrl3', Ctrl3);

function Ctrl1() {
  var vm = this;
  vm.name = "Ctrl1name";
  vm.fn = function() {
    console.log("I am controller Ctl1")
  };
}

function Ctrl2() {
  var vm = this;
  vm.name = "Ctrl2name";
  vm.fn = function() {
    console.log("I am controller Ctl2")
  };
}

function Ctrl3() {
  var vm = this;
  vm.ct1 = new Ctrl1();
  vm.ct2 = new Ctrl2();

}

在这个 Codepen 中：http://codepen.io/StretchKids/pen/gPoERN/?editors=0010

如您所见，Ctrl3 的函数将变量设置为 Ctrl1 和 Ctrl2 函数的新版本。通过该变量访问内部变量

【讨论】：