Question

我试图将isotope基本上包含在一个角度指令中。同位素插件被称为.card的a，b和c，但没有一个。如何从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插件相同的问题。

我使用$ timeout（angular的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会有所帮助。

在指令中没有应用指令函数的ng-repeat

2 个答案: