[解決済み】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 はインジェクションされます。
関連
-
JavaScriptの関数この指摘の問題を説明
-
Vueのフォームイベントのデータバインディングの説明
-
[解決済み】Node.jsで "Cannot find module "エラーを解決するには?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] JavaScriptのオブジェクトをループスルーまたは列挙するにはどうすればよいですか?
-
[解決済み] JavaScriptで文字列をbooleanに変換するにはどうしたらいいですか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] クラスを条件付きで適用する場合の最適な方法は何ですか?
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
vue+webrtc(Tencent cloud)ライブ機能の実践を実現するために
-
vueのプロジェクトでモックを使用する方法を知っていますか?
-
Vueの一般的な組み込みディレクティブの説明
-
[解決済み】ローカルファイルを開くことができません - Chrome: ローカルリソースの読み込みが許可されていない
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み】gulp anythingを実行するたびに、アサーションエラーが発生します。- タスク関数を指定する必要があります
-
[解決済み】TypeErrorの解決方法。未定義またはヌルをオブジェクトに変換できない
-
nodejs unhandledPromiseRejectionWarning メッセージ
-
Uncaught TypeError: null のプロパティ 'offsetHeight' を読み取れませんでした。