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