2016-12-29 13 views
1

を実行することを拒否し、次のように私は私のJavascriptの(角度カスタムディレクティブを)持っている:ngのリピートは

var addedSubject = function($rootScope){ 
    return{ 
     restrict:'E', 
     templateUrl:'/static/html/marks_app/directives/added_subject_item.html', 
     replace:true, 
     scope:{ 
     }, 
     controller:["$scope", function($scope){ 
      $scope.mySubjects = $rootScope.allSubjects; 
     console.log($scope.mySubjects); 
    }] 
    }; 
}; 
marksApp.directive('addedSubjectDirective', ["$rootScope",addedSubject]); 

私のHTMLを次のように:

<div class="modal-body"> 
       <div class="form_body sub_results"> 
        <div id="search_module_head" class="form_panels"> 
         <div id="search_univ" > 
          <select id="form_sub_sel" autofocus form="form_sub_eval"> 
           <option disabled selected>Select University</option> 
           <option value="ufs">University of the Free State</option> 
          </select> 
         </div> 
         <div id="search_code" class="form_panels"> 
          <input type"text" id="search_code_input" ng-model="subFilter" placeholder="Enter Subject Code"></input> 
         </div> 
        </div> 
        <div class="search_results"> 
         <div class="search_results_head"> 
          <p>Search Results</p> 
         </div> 
         <div id="search_results_content"> 
          <ul> 
           <search-result-list-item 
           ng-repeat="varsitySub in allUnivSubjects | searchFor:subFilter" 
           varsity-subject="varsitySub"> 
           </search-result-list-item> 
          </ul> 
         </div> 
        </div> 
       </div> 
       <div id="added_sub_list"> 
        <div class="added_sub_list_head"> 
         <p> 
         Added Subjects 
         </p> 
        </div> 
        <div class="added_sub_list_body"> 
         <ul> 
          <added-subject-directive ng-repeat="addedSub in mySubjects"> 
          </added-subject-directive> 
        </ul> 
        </div> 
      </div> 
</div> 

問題は、私はコードを実行するときディレクティブ(add-subject-directive)のHTML上でng-repeatを実行すると、コードは動作しません。それは画面上に何も表示されていないし、私は指示のJavascriptからログに記録しようとするものもログに記録していません。しかし、ng-repeatを削除すると、コードは期待どおりに実行されます(ALLは必要ありませんが、ng-repeatがないため)。私はすべての私の髪を引っ張ってきたので、誰も私にこの事件で間違っている可能性があることを試して理解するのを助けてくれますか?

答えて

1

いくつかあります。 ngRepeatは端末指令です。ターミナルディレクティブでは、現在の優先順位は実行されるディレクティブの最後のセットになります(現在の優先順位のディレクティブは、同じ優先順位の実行順序が未定義のため実行されます)。ディレクティブのテンプレートで使用される式やその他のディレクティブも、実行から除外されることに注意してください。

ngRepeatも優先度が1000です。単一のDOM要素に複数のディレクティブが定義されている場合、ディレクティブが適用される順序を指定する必要があることがあります。優先順位は、コンパイル関数が呼び出される前にディレクティブをソートするために使用されます。優先度は数値として定義されます。優先度の高いディレクティブが最初にコンパイルされます。リンク前機能も優先順位で実行されますが、リンク後機能は逆の順序で実行されます。同じ優先度のディレクティブの順序はundefinedです。デフォルトの優先順位は0です。

ディレクティブに優先度を付けて、ディレクティブが最初に実行されるようにします。

var addedSubject = function($rootScope){ 
    return{ 
     restrict:'E', 
     templateUrl:'/static/html/marks_app/directives/added_subject_item.html', 
     replace:true, 
     priority: 1001, // added higher priority than ngRepeat 
     scope:{ 
     }, 
     controller:["$scope", function($scope){ 
      $scope.mySubjects = $rootScope.allSubjects; 
     console.log($scope.mySubjects); 
    }] 
    }; 
}; 
marksApp.directive('addedSubjectDirective', ["$rootScope",addedSubject]); 
+0

ありがとうございました。私は今私のコードでいくつかの動きを得ています。 console.log($ scope.mySubjects);カスタムディレクティブの内部で実行され、コンソールに出力を表示します。ただし、画面には出力されません。あなたが与えることができる他のポインタ? – Tatenda

+0

問題を示すフィドルがなければ、これ以上進めるのは難しいです。別の解決策は、ディレクティブの属性としてではなく、ディレクティブが参照するテンプレートにngRepeatを置くことです。 – TheSharpieOne

+0

私はあなたの助けに感謝します。 ngRepeatをテンプレートの中に置くという解決策がありました。その修正があるかどうかは分かりませんが、うまくいきました。もう一度ありがとうございます。 – Tatenda