指令中的 ng-repeat 没有应用指令函数 [英] ng-repeat inside of a directive not having directive functions applied to it

问题描述

我试图基本上将 isotope 包装在一个角度指令中.正在为 .card 的 a、b 和 c 调用同位素插件，但没有为 d 调用.如何从 ng-repeat 中获取所有 .card 以将同位素指令应用于它们?

<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>

指令

angular.module('web').directive('isotope', function() {返回 {限制:'A'，链接:函数(范围，元素，属性，fn){$(元素).同位素({itemSelector: '.card',layoutMode: 'fitRows',});}};});

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

解决方案

在你的 ng-repeat 项上设置一个 $watch(在本例中为 $watchCollection)并让它初始化 Isotope 容器一旦浏览器呈现.如果 scope.users 中出现任何新项目，请使用包含的新项目重新加载/重绘容器:

.directive('isotope', function($timeout) {返回 {限制:'A'，链接:函数(范围，元素，属性，fn){变量初始化；scope.$watchCollection('users', function(val){$超时(功能(){如果(！初始化){$(元素).同位素({itemSelector: '.card',布局模式:'fitRows'});初始化 = 真；} 别的 {$(element).isotope('reloadItems').isotope();}});});}}});

Plunker 演示

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>

directive

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

解决方案

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 Demo

这篇关于指令中的 ng-repeat 没有应用指令函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！