AngularJS コントローラーを拡張する推奨方法は何ですか? 質問する

AngularJS コントローラーを拡張する推奨方法は何ですか? 質問する

非常によく似たコントローラーが 3 つあります。これらの 3 つのコントローラーを拡張して機能を共有するコントローラーが欲しいです。

ベストアンサー1

多分あなたコントローラーを拡張しませんが、コントローラーを拡張したり、単一のコントローラーを複数のコントローラーのミックスインにしたりすることは可能です。

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 が自動的に挿入されます。

おすすめ記事