我正在尝试使用角度加载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中,但我看不到它们)。我曾尝试过调用同位素('reloadItems')和同位素('reLayout'),但似乎没有帮助。
[agg.html]
<div class="mygrid" iso-grid ng-repeat="card in cards">
<div class="item">myitem</div>
</div>
如何使用ng-repeat?
答案 0 :(得分:22)
尝试$观察列表变量(卡片),每当它改变时重新应用同位素。我认为你的问题是在填充ng-repeat之前同位素正在运行。
快速举例:
scope.$watch(attrs.ngModel, function() {
elm.isotope();
});
答案 1 :(得分:10)
我使用砌体指令实现类似的东西+ ng-animate用于进入/离开动画,这里是一个仅限CSS动画的演示(使用Chrome供应商前缀CSS):
指令:
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");
});
});
});
}
});
};
}
};
})