问题
Follow on question from How to pass a collection to a directive in angular.js?
I can't use ng-repeat inside my directive template, because I am need to manually construct an HTML snippet to pass to a jQuery plugin that I am wrapping in a directive. https://github.com/aehlke/tag-it
In the example below, I either need to 1) find a way to apply elem.tagIt() AFTER the template is rendered, or 2) access tagSrc WITHIN the directive to construct that HTML snippet and then add it to elem.html() before applying elem.tagIt().
app.directive('tagIt', function (){
return {
restrict: 'A',
scope: { tagSrc: '='},
template: '<li data-ng-repeat="tag in tagSrc">{{tag.name}}</li>',
link: function(scope,elem, attr) {
//tagIt() is a reference to jQuery plugin that turns LIs in to stackoverflow-style tags
elem.tagit(); //tagIt is not applied to the right DOM contents because ng-repeat hasn't written it out yet
console.log(attr.tagSrc);
}
} });
回答1:
Your tags will be accessible through scope.tagSrc but they maybe not ready yet when your directive is linking.
In order to call tag it when tagSrc changes, use scope.$watch:
scope.$watch('tagSrc', function(){
elem.tagIt();
});
回答2:
One way is to wrap plugin calls or DOM manipulation code within $timeout . This assures digest cycle is complete and new element exists when plugin is initialized
app.directive('tagIt', function ($timeout){
return {
restrict: 'A',
scope: { tagSrc: '='},
template: '<li data-ng-repeat="tag in tagSrc">{{tag.name}}</li>',
link: function(scope,elem, attr) {
$timeout(function(){
elem.tagit();
console.log(attr.tagSrc);
},1)
}
}
});
回答3:
you can use
$scope.$apply(function () {
// do something with third party library
elem.tagit();
});
回答4:
Posting my answer here for posterity:
app.directive('tagIt', function (){
return {
restrict: 'A',
scope: { tagSrc: '='},
link: function(scope,elem, attr) {
scope.$watch('tagSrc', function(){
if (!(typeof scope.tagSrc=='undefined')) { //wait til we are populated
console.log(scope.tagSrc);
var li='';
_.each(scope.tagSrc,function(tag) {
li+='<li>'+tag.name+'</li>';
});
elem.html(li);
elem.tagit(); //tagIt() is a reference to jQuery plugin that turns LIs in to stackoverflow-style tags
}
});
}
}
});
来源：https://stackoverflow.com/questions/19645531/how-to-access-scope-collection-object-in-directive-to-manually-construct-html-sn