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

Question

遵循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框架,其中一个控制器有许多动作 -每个视图一个.

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

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

希望这可以帮助.