将同位素与AngularJS结合使用（ng-repeat）

Question

我正在尝试使用angular加载div以提供给同位素以进行布局。由于某种原因，我无法使用ng-repeat创建div。当我做类似的事情时，它可以正常工作：

[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"
    }]
}]);

虽然上面的方法可以正常工作，但是当我尝试从角度使用ng-
repeat时，div似乎变得不可见（它们在dom中，但我看不到它们）。我试过调用isotope（’reloadItems’）和isotope（’reLayout’），但这似乎无济于事。

[agg.html]

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

如何使用ng-repeat？

Answer 1

尝试$ watching列表变量（卡），然后每当更改时重新应用同位素。我认为您的问题是在填充ng-repeat之前同位素正在运行。

快速示例：

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