AngularJS（ng-repeat）でアイソトープを使用

Question

私は、レイアウトのためにアイソトープに供給するdivをロードするためにangleを使用しようとしています。何らかの理由で、ng-repeatを使ってdivを作成することはできません。私のような何かをするとき、それは正常に動作します：

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

私はNGを使用しようとすると上記の、[OK]を動作しますが - 角度から繰り返すと、divは見えなくなっているように見えます（彼らはdomにありますが、私は見ることができません）。私はisotope（ 'reloadItems'）とisotope（ 'reLayout'）を呼び出そうとしましたが、それは役に立たないようです。

[agg.html]

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

どのように私はNG・リピートを使用することができますか？

Answer 1

リスト変数（カード）を見てみて、変更するたびに同位体を再適用してみてください。私はここに、入力/アニメーションを残すための石工ディレクティブ+のNG-アニメーションを使用して似たような実装

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

Answer 2

：。私は

ngのリピートが充填される前に実行されている問題は、同位体であると考えクイック例（クロムベンダー接頭辞CSS付き）CSSアニメーションのみデモ：

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

ディレクティブ：

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