Verwenden von Isotope mit AngularJS (ng-repeat)

Question

Ich versuche Winkel zu laden Divs zu Isotope für Layout zu liefern. Aus irgendeinem Grund kann ich nicht ng-repeat verwenden, um die Divs zu erstellen. Wenn ich so etwas tun, es funktioniert gut:

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

Während die oben ok funktioniert, wenn ich versuche, ng zu verwenden -repeat von eckig scheinen die divs unsichtbar zu werden (sie sind in der dom, aber ich kann sie nicht sehen). Ich habe versucht, Isotope ('reloadItems') und Isotope ('reLayout') zu nennen, aber es scheint nicht zu helfen.

[agg.html]

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

Wie kann ich ng-repeat benutzen?

Answer 1

Versuchen Sie $ beobachten die Liste Variable (Karten), und wann immer es sich ändert das Isotop erneut anwenden. Ich denke, Ihr Problem ist Isotop ausgeführt wird, bevor das ng-Repeat in gefüllt ist

Schnell Beispiel:.

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

Answer 2

ich etwas ähnliches mit einem Mauerwerk Richtlinie umgesetzt + ng-belebten für Animationen geben/verläßt, ist hier eine CSS-Animation nur Demo (mit Chrom-Anbieter voran CSS):

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

Die Richtlinie:

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