Utilizzo di Isotope con AngularJS (ng-repeat)

Question

Sto provando ad usare angolare per caricare div per fornire isotopi per il layout. Per qualche motivo, non posso usare ng-repeat per creare i div. Quando faccio una cosa del genere, funziona benissimo:

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

Mentre il sopra funziona bene, quando provo ad usare ng -Ripetendo da angolare, i div sembrano diventare invisibili (sono nella dom, ma non riesco a vederli). Ho provato a chiamare isotope ('reloadItems') e isotope ('reLayout'), ma non sembra essere d'aiuto.

[agg.html]

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

Come posso usare ng-ripetere?

Answer 1

Prova $ guardando la variabile di lista (carte), e ogni volta che cambia riapplica l'isotopo. Credo che il problema è isotopo è in esecuzione prima della ng-repeat viene compilato

esempio rapida:.

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

Answer 2

ho implementato qualcosa di simile utilizzando una direttiva in muratura + ng-animate per entrare/uscire animazioni, ecco un'animazione CSS solo demo (con bicromato di potassio fornitore CSS prefisso):

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

La direttiva:

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