jquery - Angular Directives return with a timeout attached?

Question

So I am using footables in my website which is a jQuery plugin. I wrapped it in a angular directive like so:

angular.module('myApp').directive("footable", function() {
    return {
    restrict: 'A',
    link: function(scope, element, attrs){
        return element.footable(scope.$eval(attrs.footable));
    }
  }
});

and then I call footable like

<table class="footable" footable="{breakpoints: {'phone': '639','tablet':'767'}}">

The problem is that even though the directive is creating a footable, the footable needs 100 ms to work and if i start in mobile it doesn't reflow unless I send a timeout in my controller like this:

$timeout(function(){
            $('.footable').trigger('footable_redraw'); //force a redraw
    }, 100);

The problem with this is that I am using jquery and putting this is my page controller. I'd like to put that timeout and redraw in the directive and have it work? or is there another way to get finnicky jquery plugins to work?

Answer 1

您总是可以将超时移到指令中，对吗？

angular.module('myApp').directive("footable", function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            element.footable(scope.$eval(attrs.footable));
            $timeout(function(){
               element.trigger('footable_redraw');
            }, 100);
        }
    }
});

这是一个更好的Angular zen，但可能有更好的方法来处理footable本身。