1. ホーム
  2. javascript

[解決済み】AngularJSのコントローラを拡張するための推奨される方法は何ですか?

2022-04-16 12:24:21

質問

私は非常によく似た3つのコントローラを持っています。これら3つのコントローラを拡張し、機能を共有するコントローラを用意したいのですが、可能でしょうか?

どのように解決するのですか?

おそらく あなた はコントローラを拡張しませんが、コントローラを拡張したり、一つのコントローラを複数のコントローラのミキシンにすることは可能です。

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>

complexController で作成する際には $document は 'simpleController' に渡されませんが、 $document はインジェクションされます。