javascript - 扩展 AngularJS Controller 的推荐方法是什么？

Question

我有三个非常相似的 Controller 。我想要一个 Controller ，这三个扩展并共享其功能。

Answer 1

也许你不扩展 Controller ，但可以扩展 Controller 或使单个 Controller 成为多个 Controller 的混合。

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 时，其中包含的逻辑也会执行。 有关更多信息，请参阅 $controller()，但只需要传递 $scope 值。所有其他值将正常注入(inject)。

@mwarren，Angular 依赖注入(inject)会自动神奇地解决您的问题。您只需要注入(inject) $scope，但如果需要，您可以覆盖其他注入(inject)的值。 举个例子:

(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是为我们注入(inject)的。