Użycie izotopu z AngularJS (powtórzenie ng)

Question

Próbuję użyć kątowego, aby załadować elementy div, aby dostarczyć do izotopu do układania. Z jakiegoś powodu nie mogę użyć ng-repeat, aby utworzyć div. Kiedy zrobić coś takiego, to działa dobrze:

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

Chociaż powyższy działa ok, kiedy próbuję użyć ng -repeat z kanciastych, div's wydają się stać niewidzialne (są w dom, ale nie widzę ich). Próbowałem wywoływać izotop ("reloadItems") i izotop ("reLayout"), ale to nie pomaga.

[agg.html]

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

Jak mogę używać ng-powtórzyć?

Answer 1

Spróbuj $ obserwując zmienną listy (karty), a ilekroć to zmieni, ponownie zastosuj izotop. Myślę, że problem jest izotop jest uruchomiony przed ng-repeat jest wypełnione

Krótki przykład:.

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

Answer 2

I wdrożone coś podobnego za pomocą dyrektywy murowane + NG-animate dla wejść/opuścić animacje, tutaj animacja CSS tylko demo (z chromowaną dostawcy ustalonej CSS):

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

dyrektywy:

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