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



按照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();
  })

问题是:当我在createuser视图时,我不需要请求Users.getAll();

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

我的问题是:
如何在控制多个视图的控制器中优雅地调用基于视图的方法?

您可以在设置$routeProvider时使用resolve:根据匹配的路由将值传递给控制器。

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();
});

最新更新