Question

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

E.g。我有一个用于显示所有用户的视图和一个用于创建新用户的视图。我的$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框架，其中一个控制器有许多动作 - 每个视图一个。

所以我的问题：
如何根据控制多个视图的控制器中的视图优雅地调用方法？

Answer 1

您可以在设置resolve:时使用$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();
});

希望这有帮助。

在AngularJS中控制一个控制器中的多个视图

1 个答案: