Angularjs指令包装NG-重复 [英] Angularjs directive wrapping ng-repeat

问题描述

这是Angularjs新手在这里。

An Angularjs newbie here.

我试图用href=\"http://miromannino.com/projects/justified-gallery/\" rel=\"nofollow\">我Angularjs应用对齐库的

I'm trying to use the Justified gallery in my Angularjs application.

下面是 JS小提琴描述

对齐画廊是一个jQuery插件，所以我创建了指令来调用它：

Justified gallery is a jquery plugin, so I have created the directive to call it:

app.directive('justified', function () {
    return {
        restrict: 'AE',
        link: function (scope, el, attrs) {
            $(el).justifiedGallery();
        }
    };
});

和事实上它与静态定义的内容很好地工作（例如像注释掉在小提琴的HTML的一部分）。但是，一旦我尝试用NG重复使用它，喜欢这里：

and indeed it works nicely with statically defined content (like for example the commented out part of the html in the fiddle). But once I try to use it with ng-repeat, like here:

   <div justified id="justified"> 
        <a ng-repeat="dir in dirs" ng-href="/#/dir/{{dir.id}}">
          <img ng-src="{{dir.first_image}}" alt="{{dir.name}}"/>
        </a>
    </div justified>

什么也没有发生，没有被渲染。我相信它有什么做的NG-重复内的范围，但我想不通的问题适当的解决办法。

nothing happens, nothing gets rendered. I believe it has something to do with the scope within the ng-repeat, but I can't figure out proper approach to the problem.

任何人都可以请点我，这里是我正在做的错误？

Could anyone please point me, where's the error I'm making?

非常感谢。

推荐答案

您可以使用自定义指令来找出何时重复完成渲染例如从这个 SO回答

You can use a custom directive to find out when a repeat is finished rendering e.g. from this SO answer

app.directive('repeatDone', [function () {
  return {
    restrict: 'A',
     link: function (scope, element, iAttrs) {
          var parentScope = element.parent().scope();
          if (scope.$last){
               parentScope.$last = true;           
          }
        }
      };
    }]);

我已经更新了你的提琴： http://jsfiddle.net/xjZ8N/1 。

修改结果
我不得不在$超时增加，使角可以调用库函数之前更新HTML。

EDIT
I had to add in a $timeout so that angular could update the html before calling the gallery function.

这篇关于Angularjs指令包装NG-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！