3

遵循 MVC 模式，一个控制器应该能够在 AngularJS 中处理多个视图。

例如，我有一个视图用于显示所有用户，一个视图用于创建新用户。我的 $routeProvider（摘录）看起来像这样：

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/showusers', {
        templateUrl: 'partials/showusers.html',
        controller: 'userController'
      }).   
      when('/createuser', {
        templateUrl: 'partials/showusers.html',
        controller: 'userController'
      })
  }]);

两个视图共享几种方法，例如检索所有用户属性。这些共享方法通过factory.

（userController摘录）目前看起来像这样，Users工厂在哪里：

angular.module('supportModule').
  controller('userController', function($scope, Users) {
    var init = function(){
      $scope.users = Users.getAll();
      $scope.attributes = Users.getAttributes();
    }
    init();
  })

Users.getAll();问题是：当我在createuser视图中时，我不需要请求。

当然，我可以通过使用$location,$routeProvider或纯 JS 轻松解析路由，然后有条件地调用方法 - 但我认为 Angular 中有一种更优雅和更有效的方法 :)
就像在典型的 MVC 框架中，一个控制器有很多动作 -每个视图一个。

所以我的问题是：
如何优雅地基于控制器中的视图调用方法，该控制器控制多个视图？

4

1 回答 1

5

您可以使用resolve:when setup$routeProvider根据匹配的路由将值传递给控制器​​。

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/showusers', {
        templateUrl: 'partials/showusers.html',
        controller: 'userController',
        resolve: {
          ctrlOptions: function () {
            return {
              getAllUsers: true,
            };
          }
        }
      }).
      when('/createuser', {
        templateUrl: 'partials/showusers.html',
        controller: 'userController',
        resolve: {
          ctrlOptions: function () {
            return {
              getAllUsers: false,
            };
          }
        }
      })
  }]);

然后在控制器中，您可以resolve:像这样注入指定的项目：

app.controller('userController', function ($scope, Users, ctrlOptions) {
  var init = function () {
    if (ctrlOptions.getAllUsers) {
      $scope.users = Users.getAll();
    }

    $scope.attributes = Users.getAttributes();
  };

  init();
});

希望这可以帮助。

于 2014-07-31T16:37:58.777 回答