{{$index}} of ng-repeat computed after linker function of angular directive. $compile it?

♀尐吖头ヾ 提交于 2020-01-28 10:41:05

问题


html

<div repeater ng-repeat='item in items' class='first' id = '{{$index}}' > {{item}} </div>

angularjs directive:-

angular.module('time', [])
  .directive('repeater', function() {

    var linkFn = function(scope, element, attrs){
      var id = $(element).attr('id');
      alert(id); // {{$index}}
    } ...

dynamic id created inside ng-repeat, when evoked inside directive displays as {{$index}} instead of value = 0, 1, 2 ...

How do you ensure when Linker function in directive executes the dynamic ids are used? I think it can be done using $compile inside the directive. But i can't quite figure how?

$compile(element)(scope) 

is the syntax. But obviously the wrong order.


回答1:


If you really need the IDs to be already populated you can run the relevant code inside scope.$evalAsync or $timeout to make sure the binding has been updated first. I would suggest trying hard to avoid needing to inspect the DOM and relying instead on your model for any of this information, using scope.$index.

Your directive is already in the process of being compiled when and linked when your link function is reached so I think recompiling wouldn't help. It is just a case of waiting long enough to finish the linking and start a $digest where the attributes will actually be updated. This is exactly what $evalAsync will do for you.

Example here: http://plnkr.co/edit/n77x4C?p=preview




回答2:


I hope this will help you

  1. directive

     angular.module('time', []).directive('repeater', function() {
       return{
              restrict:"E",
              scope:{
                    itemarray: "=itemarray"
                 }
              template:"<div ng-repeat='item in itemarray' class='first' id = '{{$index}}' > {{item}} </div>",
               link:linkFn
            }
              var linkFn = function(scope, element, attrs){
             var id = $(element).attr('id');
             alert(id); // {{$index}}
    

    } ...

  2. html

           <repeater itemarray='itemarray"></repeater>
    


来源:https://stackoverflow.com/questions/19254705/index-of-ng-repeat-computed-after-linker-function-of-angular-directive-co

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!