Question

在使用angular-ui-router之前，一个控制器总是支持多个路由器和视图，例如：

$routeProvider.
    when('/posts', {
        templateUrl: 'views/posts/list.html'
    }).
    when('/posts/create', {
        templateUrl: 'views/posts/create.html'
    }).

一个对象的所有视图共享一个控制器：

app.controller('PostsCtrl', function($scope) {
  $scope.create = function() {
    // ...
  }
  $scope.list = function() {
    // ...
  }
});

和视图中的init数据：

<div data-ng-controller="PostsController" data-ng-init="list()">
  ...
</div>

但是在angular-ui-router中，我们使用state，所以我们需要为每个状态创建几个控制器，例如：

$stateProvider
  .state('posts', {
    abstract: true,
    url: '/posts',
    templateUrl: 'views/posts/list.html',
    controller: 'PostsCtrl'
  })
  .state('posts.detail', {
    url: '/:postId',
    templateUrl: 'views/posts/detail.html',
    controller: 'PostsDetailCtrl'
  })

分离控制器似乎不是一个好的设计模式。

那么，是否有更好的结构控制器建议？

Answer 1

回答有点晚了，但是当我在努力寻找答案时，我不妨发布一下。

我同意Nate的评论，即在大多数情况下你应该让控制器保持尽可能小，即你应该为每个州编写一个单独的控制器。但是，如果您发现自己处于一种真正认为对父视图和子视图使用相同控制器的情况，那么您可以在子视图中省略controller选项。然后，此视图将使用父级的状态。这可以在documentation中阅读。一个小例子：

app.js

app.controller('testController', ['$scope', function($scope){
    $scope.message= 'This comes from testController';
}]);

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider ,$urlRouterProvider) {
    $stateProvider
    .state('test', {
      url: '/test',
      templateUrl: 'partials/test.html',
      controller: 'testController'
    })
    .state('test.child', {
      url: '/child',
      templateUrl: 'partials/test2.html'
    });
}]);

分音/的test.html

<div>
    Test.html: {{message}}
    <div data-ui-view></div>
</div>

泛音/ test2.html

<div>
    Test2.html: {{message}} as well.
</div>

这将生成以下内容（使用网址#/test/child）

Test.html: This comes from testController
Test2.html: This comes from testController as well.

我希望这有助于任何人

使用angular-ui-router时，控制器的结构是什么？

1 个答案:

app.js

分音/的test.html

泛音/ test2.html