使用同位素与AngularJS(NG-重复) [英] Using Isotope with AngularJS (ng-repeat)
问题描述
我想使用的角度来加载div的供应的同位素的布点。出于某种原因,我不能用NG-重复创建div的。当我做这样的事情,它工作正常:
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]
[agg.html]
<div class="mygrid" iso-grid>
<div class="item">myitem</div>
</div>
[controlers.js]
[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"
}]
}]);
虽然上述工程确定,当我尝试使用纳克重复从棱角分明,div的似乎变得不可见的(他们是在DOM,但我看不到他们)。我已经打过电话同位素('reloadItems')和同位素(重新布局),但它似乎并没有帮助。
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]
[agg.html]
<div class="mygrid" iso-grid ng-repeat="card in cards">
<div class="item">myitem</div>
</div>
我如何使用NG-重复?
How can I use ng-repeat ?
推荐答案
尝试$观看列表变量(卡),每当它改变重新应用同位素。我觉得你的问题是同位素运行前的NG-重复填充
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.
简单的例子:
scope.$watch(attrs.ngModel, function() {
elm.isotope();
});
这篇关于使用同位素与AngularJS(NG-重复)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!