问题
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
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}}
} ...
html
<repeater itemarray='itemarray"></repeater>
来源:https://stackoverflow.com/questions/19254705/index-of-ng-repeat-computed-after-linker-function-of-angular-directive-co