在没有应用指令函数的指令内部重复

ng-repeat inside of a directive not having directive functions applied to it

本文关键字：指令 内部 函数 应用      更新时间：2023-09-26

我试图基本上在一个角指令内包装同位素。同位素插件正在为.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',
      });
    }
  };
});

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

在您的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();
          }
        });
      });  
    }
  }
});

恰好演示

我是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);
        }
    };
}]);

我相信这种行为的原因是范围和widget/插件的重新应用问题。同位素不会等待ng重复。

这个问题应该有更具体的解决办法。但对于"快速解决"，$timeout将有所帮助。

相关文章：