ng-repeat는 지시문 함수가 적용되지 않은 지시문 내부에 있습니다.

Question

기본적으로 각도 지시문 안에 isotope을 래핑하려고합니다. 동위 원소 플러그인은 .card의 a, b 및 c에 대해 호출되고 있지만 d의 어느 것도 필요하지 않습니다. 동위 원소 지침을 적용하기 위해 ng-repeat에서 모든 .card를 어떻게 얻을 수 있습니까?

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

    } 
    }; 
}); 

나는 this을 발견하지만 내 상황

Answer 1

ng-repeat 항목에 $ watch (또는 $ watchCollection)을 설정하고 브라우저가 렌더링되면 Isotope 컨테이너를 초기화하십시오. 새로운 항목 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 Demo

Answer 2

내가 AngularJS와와 초보를 위해 아무것도하지 않는 것. customSelect jquery plugin에서 동일한 문제가 발생했습니다.

저는 $ timeout (angle의 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-repeat를 기다리지 않습니다.

이 문제에 대한보다 구체적인 해결책이 있어야합니다. "빠른 해결"을 위해 $ timeout이 도움이 될 것입니다.