AngularJS NG-含まれ、別のテンプレートディレクティブ

Question

とダイナミックテンプレート私はコンテキストパラメータに基づいて、動的に異なるテンプレートをロードするのdivを作成したい：

私の「検索・結果・コンテナ」ディレクティブ：

app.directive("searchResultsContainer", function() { 
    restrict: "E", 
    templateUrl: "search-results-container.html", 
    controller: function($scope) { 
    $scope.templates = [ 
     { viewmode: "list", url: "search-results-list-view.html" }, 
     { viewmode: "grid", url: "search-results-grid-view.html" }, 
     { viewmode: "table", url: "search-results-table-view.html" } 
    ] 
    }, 
    link: function(scope) { 
    scope.toggleView = function() { 
     scope.templates.push(scope.templates.shift()); 
    } 
    } 
} 

私の "検索-結果-container.html" ファイル：

<div ng-include="templates[0].url"></div> 

私の "検索・結果・テーブルview.html" ファイル：

<table> 
    <tr ng-repeat="item in ctrl.items"> 
    <td>{{ item.title }}</td> 
    <tr> 
</table> 

テンプレートを動的に読み込むことは問題なく動作します。 しかし、これらのテンプレートは、ロードが完了すると、「コールバック」関数を実行します。

私はそうのように追加することができる「オンロード」属性がある知っている：

<div ng-include="templates[0].url" onload="onLoadFunction()"></div> 

これは私が」と私のオリジナル「検索・結果・コンテナ」ディレクティブを移入する必要があることを意味テンプレートファイルを区別し、現在アクティブなものに応じて特定の関数を実行するためにスイッチ（または同様の手法）を使用する必要があるスコープ内の「onLoadFunction」 - クリーンではないので、そのことを防ぐ必要があります。私はそれを行う場合

app.directive("searchResultsTableView", function() { 
    return { 
     restrict: "E", 
     templateUrl: "search-results-table-view.html", 
     controller: function($scope) { 
      ... 
     }, 
     link: function(scope) { 
      scope.someOnLoadFunction = function() { 
      /* Stuff to execute when template has loaded */ 
      } 
     } 
    } 
}); 

、と私は、これに応じて、私の「検索・結果・テーブルview.html」を変更します：

は、私は次のように、テンプレートごとに別々のディレクティブを持つようにしたい

<search-results-table-view> 
    <table> 
    <tr ng-repeat="item in ctrl.items"> 
     <td>{{ item.title }}</td> 
    <tr> 
    </table> 
</search-results-table-view> 

...私は何らかの無限ループや何かを実行し、角度/ブラウザがクラッシュする（応答しなくなる）。コンテナのディレクティブに、それぞれのネストされたテンプレートに1つの "onLoad"関数を追加することなく、私が計画していることを達成する方法はありますか？

<search-results-container ng-include="views/result-list.html"></search-results-container> 

使用結果：

app.directive("searchResultsContainer", function() { 
    restrict: "E", 
    templateUrl: "search-results-container.html", 
    controller: function($scope) { 
    $scope.templates = [ 
     { viewmode: "list", url: "search-results-list-view.html" }, 
     { viewmode: "grid", url: "search-results-grid-view.html" }, 
     { viewmode: "table", url: "search-results-table-view.html" } 
    ] 
    }, 
    link: function(scope) { 
    scope.toggleView = function() { 
     scope.templates.push(scope.templates.shift()); 
    } 
    } 
} 

このディレクティブはNG-includeディレクティブを使用してインスタンス化されています。私たちは1つのディレクティブ持っ

：

Answer 1

私たちがやってしまったことはこれです-リスト。htmlファイルには、この一節があります。

<div ng-switch on="templates[0].viewmode"> 
    <search-results-list-view ng-switch-default></gs-search-results-list-view> 
    <search-results-grid-view ng-switch-when="grid"></gs-search-results-grid-view> 
    <search-results-table-view ng-switch-when="table"></gs-search-results-table-view> 
</div> 

そして、それは簡単なNGクリックディレクティブを使用して、ビューを切り替えるためのボタンがあります。

<button ng-click="toggleViewMode()">Toggle View</button> 

このボタンは、ディレクティブで説明searchResultsContainerのtoggleView方法を、トリガ上記のように、周りのテンプレート配列の要素を移動させる：NGスイッチ指令は、最初の「ビューモード」プロパティの変更をリッスン

scope.toggleView = function() { 
    scope.templates.push(scope.templates.shift()); 
} 

テンプレート配列の要素：

ng-switch on="templates[0].viewmode" 

従ってng-によって監視当然「ビューモード」プロパティの変化をもたらす、完全配列の最初の要素を、変更ボタンをクリックしたときに変化が発生したようなスイッチ。

ディレクティブが変更に反応して、 "ng-switch-when"に適切な値が設定されている、対応する要素を表示するとき、ネストされたng-switch-defaultおよびng-switch。

app.directive("searchResultsListView", function() { 
    return { 
     restrict: "E", 
     require: "^searchResultsContainer", 
     template: "<div ng-include=\"'views/list-view.html'\"></div>", 
     controller: function($scope) { 
      /* $scope stuff goes here */ 
     }, 
     link: function(scope, element, attrs, searchResultsCtrl) { 
      /* link stuff goes here */ 
     } 
    } 
}); 

注テンプレートのNG-含んで高コンマに続いて非常に重要なエスケープ引用符、：NG-スイッチの

3人の子供は、それぞれが別々のディレクティブを使用して、ここではそれらの一つであります（ng-includeディレクティブ（more info on ng-include）で必要に応じて）。