javascript - 如何访问指令中的范围集合对象以手动构造 HTML 片段？

Question

关注如何将集合传递给 angular.js 中的指令的问题？

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

在下面的示例中，我需要 1) 找到一种方法在模板呈现后应用 elem.tagIt()，或者 2) 在指令内访问 tagSrc 以构造该 HTML 片段，然后将其添加到 elem.html()在应用 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);
        }

} });

Answer 1

您的标签将可以通过scope.tagSrc但当您的指令链接时它们可能还没有准备好。

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

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

Answer 2

您可以使用

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

Answer 3

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

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

                }
            });

        }
    }
});