2016-12-29 129 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> 

的問題是,當我運行的代碼ng-repeat指令的HTML(added-subject-directive),代碼拒絕工作。它沒有在屏幕上顯示任何東西,也沒有記錄任何我嘗試從指令的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