AngularJS ng-repeat and Packery.js

Question

我正试图在angularJS应用程序中实现packery。

当我一个接一个地手动定义项目时（请参阅注释的html代码），Packey工作得很好。当我尝试用ng重复循环做同样的事情时，packery不起作用。

如何在angularJS模板中使用ng repeat使包装厂工作？

模板：

<div class="item-container" workspace>
  <div class="module-sizer"></div>
  <div class="gutter-sizer"></div>
  <div
    ng-repeat="item in items"
    class="item">
         <!--my {{angular content}} here-->
  </div>
  <!-- this works: -->
  <!--
  <div class="item">
    item 1
  </div>
  <div class="item">
    item 2
  </div>
  <div class="item">
    item 3
  </div>
  <div class="item">
    item 4
  </div>
  <div class="item">
    item 5
  </div>
  <div class="item">
    item 6
  </div>
  <div class="item">
    item 7
  </div>
  -->
</div>

角度方向，基于：http://codepen.io/gruntruk/pen/Cpewt/

myApp.directive('workspace', ['$rootScope', function ($rootScope) {
    return {
        constrain: 'A',
        link: function (scope, element, attrs) {
            element.ready(function () {
                var packery = new Packery(element[0], {
                    rowHeight: '.module-sizer',
                    itemSelector: '.item',
                    columnWidth: '.module-sizer'
                });
                angular.forEach(packery.getItemElements(), function (item) {
                    var draggable = new Draggabilly(item);
                    packery.bindDraggabillyEvents(draggable);
                });
                packery.layout();
            });
        }
    };
}]);

Answer 1

好的，我找到了答案。

1） 我不得不使用控制器接收的带有事件的指令

2） 我不得不添加一个setTimeout。

app.directive('lastRepeat', function () {
    return function(scope, element, attrs) {
        if (scope.$last) setTimeout(function(){
            scope.$emit('LastElement', element, attrs);
        }, 1);
    };
});