Javascript 扩展 AngularJS 控制器的推荐方法是什么

发布于10月30日

我有三个非常相似的控制器.我想有一个控制器，这三个扩展和共享其功能.

推荐答案

也许you不能扩展一个控制器，但可以扩展一个控制器，或者使一个控制器成为多个控制器的混合体.

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在由"ComplController"创建时不会传递到"simpleController"中，但是会为我们注入$document.