Question

关注How to pass a collection to a directive in angular.js?

中的问题

我不能在我的指令模板中使用ng-repeat，因为我需要手动构建一个HTML片段以传递给我在指令中包装的jQuery插件。 https://github.com/aehlke/tag-it

在下面的示例中，我要么1）找到一种方法来在呈现模板之后应用elem.tagIt（），或者2）在指令中访问tagSrc以构造该HTML片段，然后将其添加到elem。在应用elem.tagIt（）之前的html（）。

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);
        }

} }）;

Answer 1

您的代码可以通过scope.tagSrc访问，但是当您的指令链接时，它们可能还没有准备就绪。

为了在tagSrc更改时调用标记，请使用scope.$watch：

scope.$watch('tagSrc', function(){
  elem.tagIt();
});

Answer 2

一种方法是在$timeout中包装插件调用或DOM操作代码。这确保了摘要周期完成，并且在初始化插件时存在新元素

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)
        }

   } 
});

Answer 3

你可以使用

$scope.$apply(function () {
    // do something with third party library
    elem.tagit();
});

Answer 4

在这里为后人发布我的答案：

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

                }
            });

        }
    }
});

如何在指令中访问范围集合对象以手动构建HTML片段？

4 个答案: