アングルアプリに部分ビューとコントローラを追加する

Question

アングルアプリのパフォーマンスを最適化しています。私は部分ビューとそのコントローラを追加するためにng-includeを使用しています。続いて、私は私が本当の「showTermRule」変数を作り、

switch (rule) { 
    case "Term Rules": 
     $scope.currentRuleDisplayed = 'Significant Terms'; 
     $scope.showTermRule = true; 
     $rootScope.$broadcast('updateTermRule',$scope.profileTree[$scope.currentProfile].termRules,$scope.currentProfile,$scope.profileTree[$scope.currentProfile].id); 
    break; 

私はNGを使用するときに私が直面しています問題はあるが、次のようにイベントを放送していたところから、親コントローラを持っているコードスニペット

<!--show term rule view--> 
<div id="showTermRule" ng-controller="TermRuleController as term" ng-if="showTermRule"> 
    <div data-ng-include src="'/Relevancy/termRule/termRule.html'" ng-if="!isPublsihed"></div> 
    <div data-ng-include src="'/Relevancy/termRule/publishedTermRule.html'" ng-if="isPublsihed"></div> 
</div> 
<!--show function rule view--> 
<div id="showFunctionRule" ng-controller="expressionBuilderController" ng-if="showFunctionRule"> 
    <div data-ng-include src="'/Relevancy/functionRule/functionRule.html'" ng-if="!isPublsihed"></div> 
    <div data-ng-include src="'/Relevancy/functionRule/publishedFunctionRule.html'" ng-if="isPublsihed"></div> 
</div> 

<div id="showQueryRule" ng-controller="queryBuilderController" ng-if="showQueryRule"> 
    <div data-ng-include src="'/Relevancy/queryRule/queryRule.html'" ng-if="!isPublsihed"></div> 
    <div data-ng-include src="'/Relevancy/queryRule/publishedQueryRule.html'" ng-if="isPublsihed"></div> 
</div> 

です子コントローラのTermRuleControllerでは、親コントローラからブロードキャストされたイベントをキャッチできません。私が理解しているように、コントローラを追加しているイベントdiv要素をDOMに追加していない時代には、 ng-showを使って同じことを試みました。それはその後動作していますが、ページをロードするのに非常に時間がかかります。誰かが部分的なビューとコントローラを追加する正しい方法を提案することができます。いくつかの調査の結果、ng-includeを使用する代わりに、ディレクティブを使用できることがわかりました。私はまだそれについて確信していません。 また、私は放送の代わりにサービスを書くことが問題を解決するかもしれないと思いますが、私の質問は、それは異なるコントローラを持つ部分的なビューを追加する正しい方法ですか？

Answer 1

ngIncludeを使用すると、テンプレートを部分的に分割することに注意する必要があります。レイアウトテンプレートの要素にコントローラを適用する代わりに、コントローラを部分テンプレート内の要素に適用します。そうすれば、親のスコープをターゲットにする必要はなく、コントローラをスコープで結合することもできます。ここでは例です：Layout.html

<div ng-controller="LoginCtrl"> 
    <div ng-include="login.html"></div> 
</div> 

login.htmlと：上記の場合

<form-field ng-field-data="{{login.usr_name}}"></form-field> 
<form-field ng-field-data="{{login.password}}"></form-field> 

は、あなたが LoginCtrlコントローラでのログインモデルが、の範囲を処理したいと思いますログイン用の部分login.html が一歩先になります。代わりに、コントローラーを部分と同じレベルの に定義します（下記参照）。

Layout.html：<div ng-include="login.html"></div> login.htmlと：

<div ng-controller="LoginCtrl"> 
    <form-field ng-field-data="{{login.usr_name}}"></form-field> 
    <form-field ng-field-data="{{login.password}}"></form-field> 
</div> 

ので、このように親と子のコントローラの$の範囲は同じになります。 イベントをブロードキャストする必要がないため、子コントローラで直接利用できます。

希望すると、この記事はあなたが扱っている問題からあなたを助けます。