Sử dụng đồng vị với AngularJS (ng-repeat)

Question

Tôi đang cố gắng sử dụng góc để tải div để cung cấp cho đồng vị cho bố cục. Vì lý do nào đó, tôi không thể dùng ng-repeat để tạo ra div. Khi tôi làm một cái gì đó như thế nào, nó hoạt động tốt:

[agg.html]

<div class="mygrid" iso-grid> 
    <div class="item">myitem</div> 
</div> 

[controlers.js]

module.directive('isoGrid', function() { 
    return function (scope, element, attrs) { 
     element.isotope({ 
      itemSelector: '.item' 
     }); 
    }; 
}); 

module.controller('aggViewport', ['$scope', '$location', function ($scope, $location) { 
    $scope.cards = [{ 
     "ID": "myid", 
     "class": "cardListTile", 
     "badge": "1" 
    } { 
     "ID": "myid2", 
     "class": "cardListTile", 
     "badge": "2" 
    }] 
}]); 

Trong khi trên hoạt động ok, khi tôi cố gắng sử dụng ng -ăn lại từ góc cạnh, của div dường như trở nên vô hình (họ đang ở trong dom, nhưng tôi không thể nhìn thấy chúng). Tôi đã cố gắng gọi đồng vị ('reloadItems') và đồng vị ('reLayout'), nhưng nó dường như không giúp đỡ.

[agg.html]

<div class="mygrid" iso-grid ng-repeat="card in cards"> 
    <div class="item">myitem</div> 
</div> 

Làm thế nào tôi có thể sử dụng ng-lặp lại?

Answer 1

Hãy thử $ xem biến danh sách (thẻ) và bất cứ khi nào thay đổi áp dụng lại đồng vị. Tôi nghĩ vấn đề của bạn là đồng vị đang chạy trước khi ng-repeat được điền vào

dụ nhanh:.

scope.$watch(attrs.ngModel, function() { 
    elm.isotope(); 
}); 

Answer 2

tôi thực hiện một cái gì đó tương tự như sử dụng một chỉ thị nề + ng-Animate cho nhập/rời khỏi hình ảnh động, đây là một hình ảnh động CSS chỉ demo (với chrome nhà cung cấp tiền tố CSS):

http://jsfiddle.net/g/3SH7a/

chỉ thị:

angular.module('app', []) 
.directive("masonry", function() { 
    var NGREPEAT_SOURCE_RE = '<!-- ngRepeat: ((.*) in ((.*?)(track by (.*))?)) -->'; 
    return { 
     compile: function(element, attrs) { 
      // auto add animation to brick element 
      var animation = attrs.ngAnimate || "'masonry'"; 
      var $brick = element.children(); 
      $brick.attr("ng-animate", animation); 

      // generate item selector (exclude leaving items) 
      var type = $brick.prop('tagName'); 
      var itemSelector = type+":not([class$='-leave-active'])"; 

      return function (scope, element, attrs) { 
       var options = angular.extend({ 
        itemSelector: itemSelector 
       }, attrs.masonry); 

       // try to infer model from ngRepeat 
       if (!options.model) { 
        var ngRepeatMatch = element.html().match(NGREPEAT_SOURCE_RE); 
        if (ngRepeatMatch) { 
         options.model = ngRepeatMatch[4]; 
        } 
       } 

       // initial animation 
       element.addClass('masonry'); 

       // Wait inside directives to render 
       setTimeout(function() { 
        element.masonry(options); 

        element.on("$destroy", function() { 
         element.masonry('destroy') 
        }); 

        if (options.model) { 
         scope.$apply(function() { 
          scope.$watchCollection(options.model, function (_new, _old) { 
           if(_new == _old) return; 

           // Wait inside directives to render 
           setTimeout(function() { 
            element.masonry("reload"); 
           }); 
          }); 
         }); 
        } 
       }); 
      }; 
     } 
    }; 
})