AngularJSの同じページに異なるコントローラを持つ同じテンプレート

Question

AngularJSの同じページに異なるコントローラで同じテンプレートを使用する際に問題があります。

は私が範囲内にある方法のdoSomething（）を有するコントローラA.

Aで使用パネルテンプレートパネルを有していると言うことができます。 PANELはパネルボタンをクリックするとこのメソッドを呼び出します。

I Bは、この方法のdoSomething（）を有するコントローラBとPANEL

、私はこのページに別のパネルを追加するようにコントローラに軽微な変更で、このパネルを複製したいと思います。

コントローラーBに付いているパネルのボタン（指示句を使用）をクリックすると、コントローラーAのdoSomething（）が呼び出されることに気付きました。おそらく、コントローラーAのdoSomethingおよびBは意味を成す範囲にある。

問題はどうすれば正しく動作させることができますか？ 私はng-ifやその他の理由でHTMLに影響するのはなぜですか？それを行うにはエレガントな方法があるのですか？

Answer 1

よく湧き出ることは、ui-routerを使用し、コントローラの中のメソッドで、あなたがいる状態を確認し、それぞれに異なる何かをすることです。

e。あなたの方法で二つの状態、panelAとpanelB、このような何か：

method() { 
    if ($state.current.name === 'panelA') { 
    do_something_for_panel_A(); 
    } 
    if ($state.current.name === 'panelB') { 
    do_something_for_panel_B(); 
    } 
} 

OFCは、私はそれぞれの「状態」、それ自身のコントローラとのそれぞれに別々のテンプレートを持つことをお勧め。しかし、デザインは個人やプロジェクトに基づいているので、それはあなた次第です。

Answer 2

2つのディレクティブを使用してscopeプロパティをtrueに設定して解決しました。

私の2つのディレクティブ：

angular.module('my-app') 
.directive('panelOne', function() { 
    return { 
    restrict: 'E', 
    templateUrl: 'panel.html', 
    controllerAs: 'panelCtrl', 
    controller: 'PanelOneController', 
    scope: true 
    }; 
}); 

と

angular.module('my-app') 
.directive('panelTwo', function() { 
    return { 
    restrict: 'E', 
    templateUrl: 'panel.html', 
    controllerAs: 'panelCtrl', 
    controller: 'PanelTwoController', 
    scope: true 
    }; 
}); 

私は、各ディレクティブは唯一、独自のスコープ内で動作しますscope: trueを追加したら。 PanelOneとPanelTwoの両方を別のページに引き継がれることなく、同じページにロードすることができます。