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

Question

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

Could you provide your html with ng-repeat? – vvahans May 19 '14 at 18:25 — vvahans, May 19 '14 at 18:25
Sorry i forgot to format it so you could see it. – Catfish May 19 '14 at 18:25 — Catfish, May 19 '14 at 18:25

score 3 · Accepted Answer · answered May 19 '14 at 19:34

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

@Marc Kline You are the king man! I was searching for this for more than 8 hours today! Cheers! — Radical_Activity, Jul 19 '16 at 22:55

score 0 · Answer 2 · answered May 19 '14 at 18:56

I am beginner with angularjs. Once I have the same issue with customSelect jquery plugin.

I have solve it using $timeout(angular's setTimeout()).

For you it will looks like this:

app.directive('isotope', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs, fn) {
            $timeout(function() {
                $(element).isotope({
                    itemSelector: '.card',
                    layoutMode: 'fitRows'
                });
            }, 0);
        }
    };
}]);

I am sure that reason for such kind of behavior is scopes and reapplying problem of widget/plugin. Isotop doesn't wait for ng-repeat.

There should be more concrete solution for this problem. But for "fast solving" $timeout will help.

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

2 Answers2

Linked