Javascript 角度扩展控制器方法
在angularJs中,我有一组控制器,它们具有一些相同的功能:Javascript 角度扩展控制器方法,javascript,angularjs,Javascript,Angularjs,在angularJs中,我有一组控制器,它们具有一些相同的功能: angular.module('myApp').controller(...){ function lockForm(id){ ... } function releaseForm(id){ ... } function dbError(e){ ... } // and some other little stuff a
angular.module('myApp').controller(...){
function lockForm(id){
...
}
function releaseForm(id){
...
}
function dbError(e){
...
}
// and some other little stuff again and again in every controller
}
我读过的例子都是基于从$scope和@this扩展(mixin)内容的。难道没有办法扩展整个控制器吗
感谢上帝,我解决了我的问题。这不完全是我想要的,但比以前好多了
// base ctrl
angular.module('myApp').controller('baseViewCtrl', function ($scope, viewData) {
this.lockForm = function() {
viewData.isLoading = true;
};
// ... and others
});
// child ctrl
angular.module('myApp').controller('childCtrl', function ($scope) {
var viewData = {
// some stuff
};
// inject from basecontroller
angular.extend(this, $controller('baseViewCtrl', {$scope: $scope, viewData: viewData}));
// link $scope
$scope.viewData = viewData;
$scope.onSelectUnit = onSelectUnit;
// child controller methods
function onSelectUnit(){
this.lockForm();
...
}
});
它看起来有点难看,因为我几乎在所有地方都避免了这个
也许我这样做,并使用base而不是@this来更清楚地说明有注入方法:
// child ctrl
angular.module('myApp').controller('childCtrl', function ($scope) {
var viewData = {
// some stuff
};
// inject from basecontroller
var base = $controller('baseViewCtrl', {$scope: $scope, viewData: viewData});
// link $scope
$scope.viewData = viewData;
$scope.onSelectUnit = onSelectUnit;
// child controller methods
function onSelectUnit(){
base.lockForm();
...
}
使用$controller服务并传递需要扩展的控制器的名称,如下所示 父控制器
angular.module('myApp').controller('parentController',function(){
$scope.lockForm = function(id){
...
}
});
angular.module('app').controller('childController',function($controller){
var parentController = $controller('parentController',{$scope:$scope});
console.log(parentController.lockForm);
});
子控制器
angular.module('myApp').controller('parentController',function(){
$scope.lockForm = function(id){
...
}
});
angular.module('app').controller('childController',function($controller){
var parentController = $controller('parentController',{$scope:$scope});
console.log(parentController.lockForm);
});
提及
要扩展到此,请使用以下命令
angular.module('app').controller('childController',function($controller){
var parentController = $controller('parentController',{$scope:$scope});
angular.extend(this,parentController);
console.log(this.lockForm);
});
var extendedController = $controller('parentController',{$scope:$scope});
extendeController.lockForm('123');
如果将函数附加到作用域,则需要按如下方式返回这些函数
angular.module('myApp').controller('parentController',function(){
var _lockForm = function(id){
...
}
return{
lockForm = _lockForm
}
});
因此,在您的扩展控制器中,可以使用如下
angular.module('app').controller('childController',function($controller){
var parentController = $controller('parentController',{$scope:$scope});
angular.extend(this,parentController);
console.log(this.lockForm);
});
var extendedController = $controller('parentController',{$scope:$scope});
extendeController.lockForm('123');
将公共函数放入服务并注入服务。控制器应该非常精简。业务逻辑属于服务您可以使用父控制器和子控制器概念。或者您也可以使用服务/工厂功能。我明白了。但是导入的方法(或者更好的命名函数)的闭包是什么呢?@Steffomio您已经返回了您的函数并使用了它们。我已经用这个regrad更新了答案!