AngularJS ng-repeat和Packery.js

Question

我想在angularJS應用程序中實現打包。

當我逐個手動定義項目（請參閱註釋的html代碼）時，Packery可以正常工作。 當我嘗試用ng-repeat循環做同樣的事情時，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); 
    }; 
});