将同位素与AngularJS一起使用（ng-repeat）

我正在尝试使用角度加载div来为同位素提供布局。 出于某种原因，我不能使用ng-repeat来创建div。 当我做类似的事情，它工作正常：

[agg.html]

 
myitem
  

[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]

 
 
myitem
  

我怎样才能使用ng-repeat？

Answer 1

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

快速举例：

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

Answer 2

我使用砌体指令实现了类似的东西+ ng-animate用于进入/离开动画，这里是一个仅限CSS动画的演示（以chrome供应商为前缀的CSS）：

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

指令：

 angular.module('app', []) .directive("masonry", function () { var NGREPEAT_SOURCE_RE = ''; 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"); }); }); }); } }); }; } }; })