Question

我写了一个应用程序，它是多个项目的框架。所以我用填充范围的控制器编写了我的模板中使用的最小变量和回调。多个项目将使用此代码库并通过扩展我的控制器和模板来创建自己的应用程序。他们希望例如在范围中添加新变量或在某些控制器中添加新的回调。我需要找到一种简单的方法让他们在不改变我的模块的情况下做到这一点。

所以我想说我有一个非常简单的控制器：

angular.module('controller-a').controller('a', function($scope) {
  $scope.foo = 'bar';
});

此控制器可通过以下基本路由访问：

$routeProvider.
       when('/a', {
            templateUrl: 'partials/a.html',
            controller: 'a'
       }).

并且想要为范围添加新值，例如$scope.baz = 'klux';）。一个人如何表现呢？是否可以更改a以避免重新定义路由或必须为此绝对创建另一个控制器？

我不在标准用例中，我有一个控制器，其功能在同一个应用程序中需要多个控制器。每个控制器都会被覆盖一次或不被覆盖。

最接近我想要的是：

angular.module('controller-b', []).controller('b', function($scope) {
  var original = $controller('a');
  original($scope);
  $scope.foo = 'bar';
});

但是我需要更改路由以使用b代替a，有没有办法更新到位？

Answer 1

如果要向多个控制器添加新值，可以在所有控制器中注入服务，并在$watch中注入更改。您的开发人员更改服务但不更改控制器。我认为这是服务的重点。

angular.module('controller-a', ['whatever']).controller('a', function($scope, MyService) {
  $scope.foo = 'bar';
  $scope.$watch(MyService.return_new_values(), 
    function(newValue, oldValue) {
        // do somethign with the values?
    });
});

angular.module('controller-b', ['whatever']).controller('b', function($scope, MyService) {
  $scope.foo = 'bar';
  $scope.$watch(MyService.return_new_values(), 
    function(newValue, oldValue) {
        // do somethign with the values?
    });
});

angular.module('whatever').factory('MyService', function() {

    var myService = {};

    myService.developer_x_var = 'klux';
    myService.developer_y_var = 'foo';

    myService.return_new_values = function() {
        var array_of_new_values = [myService.developer_x_var,
                                   myService.developer_y_var
                                   ];
        return array_of_new_values;
    }

    return myService;
});

Answer 2

我找到了一种方法，可以通过覆盖应用程序和路由映射以及定义一个扩展原始控制器的新控制器来完成我需要的工作：

var app = angular.module('app-ext', [ 'app', 'ngRoute']);
app.config(function($routeProvider) {
  $routeProvider.
    when('/a', {
      templateUrl: 'partials/a.html',
      controller: 'b'
    });
});
app.controller('b', ['$controller', '$scope', '$http', '$location', function($controller, $scope, $http, $location) {
  // Apply original controller
  $controller('a', {'$scope' : $scope});
  // Add own features here
  $scope.foo = 'bar';
}]);

其效果与我预期的一样。

可扩展角度控制器

2 个答案: