指令内NG重复没有应用到它的指令功能 [英] ng-repeat inside of a directive not having directive functions applied to it

问题描述

我想基本上换一个角度指令内同位素。同位素插件正在要求.card是，b和c，但没有任何的d的一个。我怎样才能从纳克重复所有.card对应用了同位素指令？

I'm trying to basically wrap isotope inside an angular directive. The isotope plugin is being called for .card's a, b, and c, but none of the d's. How can I get all the .card's from the ng-repeat to have the isotope directive applied to them?

<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',
      });

    }
  };
});

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

I found this but it doesn't seem to do anything for my situation

推荐答案

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

Set up a $watch (or $watchCollection in this case) on your ng-repeat items and have it initialize the Isotope container once the browser renders. If any new items appear in scope.users, have the container reload/redraw with the new items included:

.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演示

这篇关于指令内NG重复没有应用到它的指令功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！