在 AngularJS 中使用同位素 (ng-repeat) [英] Using Isotope with AngularJS (ng-repeat)

问题描述

我正在尝试使用 angular 加载 div 以提供给同位素进行布局.出于某种原因，我不能使用 ng-repeat 来创建 div.当我做类似的事情时，它工作正常:

[agg.html]

<div class="item">myitem</div>

[controlers.js]

module.directive('isoGrid', function () {返回函数(范围、元素、属性){元素.同位素({itemSelector: '.item'});};});module.controller('aggViewport', ['$scope', '$location', function ($scope, $location) {$scope.cards = [{"ID": "myid","class": "cardListTile",徽章":1"} {"ID": "myid2","class": "cardListTile",徽章":2"}]}]);

虽然上述工作正常，但当我尝试从 angular 使用 ng-repeat 时，div 似乎变得不可见(它们在 dom 中，但我看不到它们).我试过调用 isotope('reloadItems') 和 isotope('reLayout')，但似乎没有帮助.

[agg.html]

<div class="item">myitem</div>

如何使用 ng-repeat ?

解决方案

尝试 $watching 列表变量(卡片)，并在它发生变化时重新应用同位素.我认为您的问题是同位素在填充 ng-repeat 之前正在运行.

快速示例:

scope.$watch(attrs.ngModel, function() {榆树同位素()；});

I'm trying to use angular to load div's to supply to isotope for layouting. For some reason, I can't use ng-repeat to create the div's. When I do something like, it works fine:

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

While the above works ok, when I try to use ng-repeat from angular, the div's seem to become invisible (they are in the dom, but I can't see them). I've tried calling isotope('reloadItems') and isotope('reLayout'), but it doesn't seem to help.

[agg.html]

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

How can I use ng-repeat ?

解决方案

Try $watching the list variable (cards), and whenever it changes re-apply the isotope. I think your problem is isotope is running before the ng-repeat is filled in.

Quick example:

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

这篇关于在 AngularJS 中使用同位素 (ng-repeat)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！