Javascript 可扩展角度控制器
我编写了一个应用程序,它是多个项目的框架。因此,我编写了控制器,用模板中使用的最小变量和回调填充范围。多个项目将使用此代码库,并通过扩展我的控制器和模板来创建自己的应用程序。例如,他们希望向作用域添加新变量或在某些控制器中添加新回调。我需要找到一个简单的方法,让他们在不改变我的模块的情况下做到这一点 假设我有一个非常简单的控制器:Javascript 可扩展角度控制器,javascript,angularjs,Javascript,Angularjs,我编写了一个应用程序,它是多个项目的框架。因此,我编写了控制器,用模板中使用的最小变量和回调填充范围。多个项目将使用此代码库,并通过扩展我的控制器和模板来创建自己的应用程序。例如,他们希望向作用域添加新变量或在某些控制器中添加新回调。我需要找到一个简单的方法,让他们在不改变我的模块的情况下做到这一点 假设我有一个非常简单的控制器: angular.module('controller-a').controller('a', function($scope) { $scope.foo = 'b
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,有没有办法就地更新a?当您想向多个控制器添加新值时,您可以在所有控制器中插入服务,并$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;
});
我找到了一种方法,通过覆盖应用程序和路由映射,并定义一个新的控制器来扩展原始控制器,如下所示:
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';
}]);
它的工作原理与我预期的一样。“在不更改代码的情况下扩展“a”控制器的内容”。那么,控制器的用途是什么呢?初始控制器提供了多个项目共有的一些基本功能,然后多个项目会希望以自己的方式更改范围,而不必更改/复制初始代码(实际中有更多的代码)@joliver,称为service,factory。关于这类问题和解决方案,软件模式是明确的。我在控制器中拥有的只是非常基本的作用域逻辑(声明变量、回调),我只希望人们在控制器定义的范围之外声明其他作用域变量和回调。我不认为这是服务的目的(在单个角度应用程序中,我的控制器“a”不会被覆盖两次,会有多个由不同的人创建的应用程序覆盖每个a)。让我邀请您使用TypeScript,我认为这会解决您的问题。你的想法是“一种不同的语言的方式”,它不是一种语言,以及如何处理新的价值观?显然,如果我误解了这一逻辑,那么它不应该在基础a中,而应该在扩展模块中。当然,您如何处理您的值取决于您的用例,所以这取决于您。只要您的依赖关系正确,在哪个模块中有什么并不重要。这取决于你的应用程序的结构。我重新编写了我的问题,现在应该更清楚了:我负责编写模块a,其他开发人员将希望在模块b中扩展控制器,而不能更改模块a,因此哪个模块中有什么是重要的。所以我不认为你能解决这个问题。你想要一个基本控制器,然后从中“继承”并扩展它?我认为控制器并不是真的要这样使用的。无论发生什么逻辑,都应该有不同的结构。控制器是一段相当短的代码,可以将您的视图粘合到更复杂的逻辑上。没错,这就是我最初几天的研究结果。我现在正在深入研究Angular源代码,看看这是否仍然可以干净利落地完成,一旦我有了一些东西,我会回答自己的反馈。