指令内部的 ng-repeat 没有应用指令函数答案

【问题标题】：ng-repeat inside of a directive not having directive functions applied to it指令内部的 ng-repeat 没有应用指令函数
【发布时间】：2014-05-19 18:20:54
【问题描述】：

我试图基本上将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，但它似乎对我的情况没有任何帮助

【问题讨论】：

您可以为您的 html 提供 ng-repeat 吗？
对不起，我忘了格式化，以便您看到。

标签： javascript angularjs angularjs-directive

【解决方案1】：

在您的ng-repeat 项目上设置一个 $watch（或本例中的 $watchCollection），并在浏览器呈现后让它初始化同位素容器。如果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

【讨论】：

@Marc Kline 你是王者！我今天搜索了8个多小时！干杯！

【解决方案2】：

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

我已经使用 $timeout(angular's 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 会有所帮助。

【讨论】：