我有三个非常相似的控制器。我想要一个控制器，这三个扩展并共享其功能。
问问题
84564 次
12 回答
304
也许您不扩展控制器，但可以扩展控制器或使单个控制器成为多个控制器的混合。
module.controller('CtrlImplAdvanced', ['$scope', '$controller', function ($scope, $controller) {
// Initialize the super class and extend it.
angular.extend(this, $controller('CtrlImpl', {$scope: $scope}));
… Additional extensions to create a mixin.
}]);
创建父控制器时，其中包含的逻辑也会被执行。有关更多信息，请参见 $controller()，但仅$scope需要传递值。所有其他值将正常注入。
@mwarren，Angular 依赖注入会自动解决您的问题。您只需要注入 $scope，但如果需要，您可以覆盖其他注入的值。举个例子：
(function(angular) {
var module = angular.module('stackoverflow.example',[]);
module.controller('simpleController', function($scope, $document) {
this.getOrigin = function() {
return $document[0].location.origin;
};
});
module.controller('complexController', function($scope, $controller) {
angular.extend(this, $controller('simpleController', {$scope: $scope}));
});
})(angular);<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<div ng-app="stackoverflow.example">
<div ng-controller="complexController as C">
<span><b>Origin from Controller:</b> {{C.getOrigin()}}</span>
</div>
</div>虽然 $document 在由 'complexController' 创建时并没有传递到 'simpleController' 中，但 $document 是为我们注入的。
于 2013-10-29T22:13:53.123 回答
52
对于继承，您可以使用标准的 JavaScript 继承模式。这是一个使用$injector
function Parent($scope) {
$scope.name = 'Human';
$scope.clickParent = function() {
$scope.name = 'Clicked from base controller';
}
}
function Child($scope, $injector) {
$injector.invoke(Parent, this, {$scope: $scope});
$scope.name = 'Human Child';
$scope.clickChild = function(){
$scope.clickParent();
}
}
Child.prototype = Object.create(Parent.prototype);
如果您使用controllerAs语法（我强烈推荐），使用经典继承模式会更容易：
function BaseCtrl() {
this.name = 'foobar';
}
BaseCtrl.prototype.parentMethod = function () {
//body
};
function ChildCtrl() {
BaseCtrl.call(this);
this.name = 'baz';
}
ChildCtrl.prototype = Object.create(BaseCtrl.prototype);
ChildCtrl.prototype.childMethod = function () {
this.parentMethod();
//body
};
app.controller('BaseCtrl', BaseCtrl);
app.controller('ChildCtrl', ChildCtrl);
另一种方法可能是创建“抽象”构造函数，它将成为您的基本控制器：
function BaseController() {
this.click = function () {
//some actions here
};
}
module.controller('ChildCtrl', ['$scope', function ($scope) {
BaseController.call($scope);
$scope.anotherClick = function () {
//other actions
};
}]);
于 2013-05-14T10:14:38.930 回答
16
好吧，我不确定你想要实现什么，但通常服务是要走的路。您还可以使用 Angular 的 Scope 继承特性在控制器之间共享代码：
<body ng-controller="ParentCtrl">
<div ng-controller="FirstChildCtrl"></div>
<div ng-controller="SecondChildCtrl"></div>
</body>
function ParentCtrl($scope) {
$scope.fx = function() {
alert("Hello World");
});
}
function FirstChildCtrl($scope) {
// $scope.fx() is available here
}
function SecondChildCtrl($scope) {
// $scope.fx() is available here
}
于 2013-05-14T10:17:17.177 回答
15
你不扩展控制器。如果它们执行相同的基本功能，则需要将这些功能转移到服务中。该服务可以注入到您的控制器中。
于 2013-05-14T09:54:57.053 回答
10
从这篇文章中获得的另一个很好的解决方案：
// base controller containing common functions for add/edit controllers
module.controller('Diary.BaseAddEditController', function ($scope, SomeService) {
$scope.diaryEntry = {};
$scope.saveDiaryEntry = function () {
SomeService.SaveDiaryEntry($scope.diaryEntry);
};
// add any other shared functionality here.
}])
module.controller('Diary.AddDiaryController', function ($scope, $controller) {
// instantiate base controller
$controller('Diary.BaseAddEditController', { $scope: $scope });
}])
module.controller('Diary.EditDiaryController', function ($scope, $routeParams, DiaryService, $controller) {
// instantiate base controller
$controller('Diary.BaseAddEditController', { $scope: $scope });
DiaryService.GetDiaryEntry($routeParams.id).success(function (data) {
$scope.diaryEntry = data;
});
}]);
于 2014-05-23T07:06:13.833 回答
7
您可以通过注入来创建服务并在任何控制器中继承其行为。
app.service("reusableCode", function() {
var reusableCode = {};
reusableCode.commonMethod = function() {
alert('Hello, World!');
};
return reusableCode;
});
然后在您想要从上述 reusableCode 服务扩展的控制器中：
app.controller('MainCtrl', function($scope, reusableCode) {
angular.extend($scope, reusableCode);
// now you can access all the properties of reusableCode in this $scope
$scope.commonMethod()
});
演示插件： http ://plnkr.co/edit/EQtj6I0X08xprE8D0n5b?p=preview
于 2014-08-26T08:40:21.200 回答
5
您可以尝试这样的事情（尚未测试）：
function baseController(callback){
return function($scope){
$scope.baseMethod = function(){
console.log('base method');
}
callback.apply(this, arguments);
}
}
app.controller('childController', baseController(function(){
}));
于 2013-05-14T10:14:19.413 回答
4
您可以使用服务、工厂或提供者进行扩展。它们是相同的，但具有不同程度的灵活性。
这里有一个使用工厂的例子：http: //jsfiddle.net/aaaflyvw/6KVtj/2/
angular.module('myApp',[])
.factory('myFactory', function() {
var myFactory = {
save: function () {
// saving ...
},
store: function () {
// storing ...
}
};
return myFactory;
})
.controller('myController', function($scope, myFactory) {
$scope.myFactory = myFactory;
myFactory.save(); // here you can use the save function
});
在这里您还可以使用 store 功能：
<div ng-controller="myController">
<input ng-blur="myFactory.store()" />
</div>
于 2014-02-28T20:00:03.873 回答
4
可以直接使用 $controller('ParentController', {$scope:$scope}) 示例
module.controller('Parent', ['$scope', function ($scope) {
//code
}])
module.controller('CtrlImplAdvanced', ['$scope', '$controller', function ($scope, $controller) {
//extend parent controller
$controller('CtrlImpl', {$scope: $scope});
}]);
于 2015-08-28T04:03:18.477 回答
1
您可以将 Angular “as” 语法与纯 JavaScript 继承结合使用
在此处查看更多详细信息 http://blogs.microsoft.co.il/oric/2015/01/01/base-controller-angularjs/
于 2015-01-01T08:54:36.413 回答
1
我认为扩展控制器是一种不好的做法。而是将您的共享逻辑放入服务中。javascript 中的扩展对象往往变得相当复杂。如果你想使用继承，我会推荐 typescript。尽管如此，在我看来，瘦控制器是更好的选择。
于 2016-01-30T13:06:03.057 回答
1
我写了一个函数来做到这一点：
function extendController(baseController, extension) {
return [
'$scope', '$injector',
function($scope, $injector) {
$injector.invoke(baseController, this, { $scope: $scope });
$injector.invoke(extension, this, { $scope: $scope });
}
]
}
你可以像这样使用它：
function() {
var BaseController = [
'$scope', '$http', // etc.
function($scope, $http, // etc.
$scope.myFunction = function() {
//
}
// etc.
}
];
app.controller('myController',
extendController(BaseController,
['$scope', '$filter', // etc.
function($scope, $filter /* etc. */)
$scope.myOtherFunction = function() {
//
}
// etc.
}]
)
);
}();
优点：
- 您不必注册基本控制器。
- 没有一个控制器需要知道 $controller 或 $injector 服务。
- 它与 angular 的数组注入语法配合得很好——如果你的 javascript 要被缩小，这是必不可少的。
- 您可以轻松地将额外的可注入服务添加到基本控制器，而无需记住将它们添加到所有子控制器并从中传递它们。
缺点：
- 必须将基本控制器定义为变量，这可能会污染全局范围。在我的使用示例中，我通过将所有内容包装在一个匿名的自执行函数中来避免这种情况，但这确实意味着所有子控制器都必须在同一个文件中声明。
- 此模式适用于直接从您的 html 实例化的控制器，但不适用于您通过 $controller() 服务从代码创建的控制器，因为它对注入器的依赖阻止您直接注入额外的、非- 调用代码中的服务参数。
于 2016-01-12T17:33:47.620 回答