コントローラ機能を再利用する+それを拡張する

Question

私は、その構造が非常に似ているいくつかのパネルからなるページを持っています。彼らはそれぞれ1つのコントローラを使用します。しかし、それらの類似性のために、私はそうのようなコントローラ機能を再利用：

function panelController($scope) { 
... 
} 
angular.module('myApp.controllers') 
    .controller('panel1Controller', panelController); 
angular.module('myApp.controllers') 
    .controller('panel2Controller', panelController); 

結果はパネル1とpanel2は独自の明確なスコープを持っていますが、ビューがバインドできるかという点で同じように見えるということです。

ここで、私はpanel3に同じパターンを使用したいが、わずかな拡張が必要な​​ところにいる。つまり、私はpanel3の$ scopeにのみ入れたいものがあります。理想的には、私はこのようなことをしたいと思っています：

function panel3ControllerExtension($scope) { 
    $scope.panel3Field = "I must only live in panel3"; 
} 
angular.module('myApp.controllers') 
    .controller('panel3Controller', panelController, panel3ControllerExtension); 

しかし、それはできません。そこにこれに良いパターンがありますか？

---

編集： 同様のパネルは唯一、彼らは$スコープが含まれていることを期待するものでは似ています。具体的には、スコープに顧客オブジェクトを含めることを期待します。だからpanel1は$ scope.customer.nameにバインドし、panel2は$ scope.customer.phoneにバインドします。 ...彼らは違って見えるので、私は違う振る舞いをするので、私はそれらの指示を行うことが行く方法だとは思わない。私が間違っているなら私を訂正してください。

Answer 1

角型のコントローラは、コンストラクタとして効果的に使用されます。そのため、Javascriptの「継承」のルールが適用されます。拡張のためのいくつかの方法：

1. apply/call「ベース」機能：

   function panel3Controller($scope) { 
       // add the functionality of `panelController` to this scope 
       // in OO terms this can be thought of as calling the `super` constructor 
       panelController.call(this, $scope); 
       // add panel3 specific functionality 
       $scope.panel3SpecificThing = "..."; 
   } 
   // just register the new controller 
   angular.module('myApp.controllers') 
       .controller('panel3Controller', panel3Controller); 
   

   この方法は、おそらくあなたのコードに最小限の変更で何をしたいあなたを取得します。

2. JS継承を使用する：コントローラをJS「クラス」にして、子コントローラにプロトタイプ的に継承させます。あなたはES2015を使用している場合

   function PanelController($scope) { 
       this.$scope = $scope; 
       this.something = '...'; 
   } 
   
   PanelController.prototype.someMethod = function() { 
       ... 
   } 
   
   function Panel3Controller($scope) { 
       PanelController.call(this, $scope); 
       this.somethingElse = '...'; 
   } 
   Panel3Controller.prototype = new PanelController(); 
   Panel3Controller.prototype.constructor = Panel3Controller; 
   
   Panel3Controller.prototype.panel3SpecificMehod = function() { 
       ... 
   }; 
   

   、上記の簡略化を図ることができる：

   class PanelController { 
       constructor($scope) { 
        ... 
       } 
       ... 
   } 
   
   class Panel3Controller extends PanelController { 
       constructor($scope) { 
        super($scope); 
        ... 
       } 
       ... 
   } 
   

   もう一度、あなただけの一人で新しいコントローラを登録するまたcontroller as構文と接続詞でこれを使用することもできます。

   angular.module('myApp.controllers') 
       .controller('panel3Controller', Panel3Controller); 
   

   ここに示すように、プロパティとメソッドは、コントローラに置かれている場合、つまりHTMLで、controller as構文を使用します。

   モジュールシステムを適切に配置すると、このパターンが本当に便利になります。

3. コントローラの正確な機能に応じて、コメントに指摘されているように、1つまたは複数のサービスでコントローラの機能を抽出することができます。コントローラは、これらのサービスのための薄いラッパーになります。これが良いアイデアであるかどうかはコントローラの正確な機能に依存します。ディレクティブについては

：彼らは常に移動するための方法です:)そして、あなたは代わりにng-controllerでそれを使用してのディレクティブのコントローラとして、あなたのコードを再利用することができます。テンプレートが異なる2つのディレクティブ（例：customer.nameとcustomer.phoneバインディング）と同じコントローラを使用することもできます。