1

angular.js でコレクションをディレクティブに渡す方法からの質問に従ってください。

ディレクティブ テンプレート内で ng-repeat を使用できません。ディレクティブでラップしている jQuery プラグインに渡す HTML スニペットを手動で作成する必要があるためです。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);
        }

} });

4

4 に答える 4

2

タグは経由でアクセスできますscope.tagSrcが、ディレクティブがリンクされているときにはまだ準備ができていない可能性があります。

tagSrc が変更されたときにタグを呼び出すには、次を使用しますscope.$watch。

scope.$watch('tagSrc', function(){
  elem.tagIt();
});
于 2013-10-28T21:48:29.613 に答える
1

1 つの方法は、プラグイン呼び出しまたは 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)
        }

   } 
});
于 2013-10-28T21:47:09.050 に答える
1

あなたが使用することができます

$scope.$apply(function () {
    // do something with third party library
    elem.tagit();
});
于 2013-10-28T21:57:05.970 に答える
0

後世のためにここに私の答えを投稿してください：

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

                }
            });

        }
    }
});
于 2013-10-28T22:12:37.480 に答える