Angularjs 指令包装 ng-repeat

Question

这里是一个 Angularjs 新手。

我正在尝试在我的 Angularjs 应用程序中使用 Justified gallery。

这里是JS Fiddle describing the problem

Justified Gallery 是一个 jquery 插件，所以我创建了指令来调用它：

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

确实，它可以很好地处理静态定义的内容（例如，小提琴中 html 的注释部分）。但是一旦我尝试将它与 ng-repeat 一起使用，就像这里一样：

   <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-repeat 中的范围有关，但我无法找出解决问题的正确方法。

谁能指出我的错误在哪里？

非常感谢。

Answer 1

您可以使用自定义指令来找出重复何时完成渲染，例如从这个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。

编辑
我必须添加一个 $timeout 以便 angular 可以在调用画廊函数之前更新 html。

Answer 2

Simple way:

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