Ng-repeat Inside Of A Directive Not Having Directive Functions Applied To It

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 fro

Solution 1:

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

Solution 2:

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.