Uso de isótopos con AngularJS (ng-repeat)

Question

Estoy tratando de usar angular para cargar div's para suministrar al isótopo para el diseño. Por alguna razón, no puedo usar ng-repeat para crear los div. 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" 
    }] 
}]); 

Si bien lo anterior funciona bien, cuando trato de usar ng -repite desde angular, los div's parecen volverse invisibles (están en el dom, pero no puedo verlos). Intenté llamar a isótopo ('reloadItems') e isótopo ('reLayout'), pero no parece ser de ayuda.

[agg.html]

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

¿Cómo puedo usar ng-repetir?

Answer 1

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

Ejemplo rápido:.

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

Answer 2

he implementado algo similar con una directiva de mampostería + ng-animado para entrar/salir de animaciones, aquí está una animación CSS única demo (con cromo proveedor CSS con el prefijo):

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