一个指令的内部纳克重复不具有施加到其上的指令的功能(ng-repeat inside of a di

我想基本上包裹同位素的角度指令内。 同位素插件正在呼吁.card是，B和C，但没有D's的。 我怎样才能得到所有的.card的从NG-重复到应用了同位素指令？

<div id="cardHolder" isotope>
  <div class="card">a</div>
  <div class="card w2">b</div>
  <div class="card">c</div>
  <div class="card" ng-repeat="user in users">d</div>
</div>

指示

angular.module('web').directive('isotope', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs, fn) {

      $(element).isotope({
        itemSelector: '.card',
        layoutMode: 'fitRows',
      });

    }
  };
});

我发现这个 ，但它似乎并没有对我的情况做任何事

Answer 1:

在您设置一个$表（或$ watchCollection在这种情况下） ng-repeat的项目，一旦浏览器呈现有它初始化同位素容器。 如果有任何新的项目出现在scope.users ，有容器重装/重绘新项目包括：

.directive('isotope', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs, fn) {
      var init;
      scope.$watchCollection('users', function(val){
        $timeout(function(){
          if(!init) {
            $(element).isotope({
              itemSelector: '.card',
              layoutMode: 'fitRows'
            });
            init = true;
          } else {
            $(element).isotope('reloadItems').isotope();
          }
        });
      });  
    }
  }
});

Plunker演示

Answer 2:

我是初学者与angularjs。 一旦我有customSelect jQuery插件同样的问题。

我使用$超时解决它（角的的setTimeout（））。

对于你它会是这样的：

app.directive('isotope', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs, fn) {
            $timeout(function() {
                $(element).isotope({
                    itemSelector: '.card',
                    layoutMode: 'fitRows'
                });
            }, 0);
        }
    };
}]); 

我相信，之所以会出现这样一种行为是范围和部件/插件重新申请的问题。 ISOTOP不等待NG重复。

应该有这个问题更具体的解决方案。 但是，对于“快解决” $超时会有所帮助。

文章来源: ng-repeat inside of a directive not having directive functions applied to it