Question

Angularjs新手在这里。

我试图在Angularjs应用程序中使用Justified gallery。

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可以在调用gallery函数之前更新html。

Answer 2

Simple way：

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

Angularjs指令包装ng-repeat

2 个答案: