jquery - style - ngclass angular 6

Usando Isótopo con AngularJS(ng-repetición)

Question

Estoy tratando de usar angular para cargar div para suministrar isótopos para el diseño. Por alguna razón, no puedo usar ng-repeat para crear los div''s. Cuando hago algo así, funciona bien:

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

Mientras que lo anterior funciona bien, cuando trato de usar ng-repeat desde angular, los div parecen volverse invisibles (están en el dom, pero no puedo verlos). He intentado llamar al isótopo (''reloadItems'') y al isótopo (''reLayout''), pero no parece ayudar.

[agg.html]

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

¿Cómo puedo usar ng-repeat?

Answer 1

Implementé algo similar usando una directiva de mampostería + ng-animate para animaciones de entrada / salida, aquí hay una demostración de animación solo en CSS (con el proveedor de chrome con el prefijo de CSS):

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

La directiva:

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

Answer 2

Pruebe $ observando la variable de la lista (tarjetas), y cuando cambie, vuelva a aplicar el isótopo. Creo que su problema es que el isótopo se está ejecutando antes de que se complete la repetición ng.

Ejemplo rápido:

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