CODEWITHSUNDEEP
javascriptjqueryangularjs
Luozt
Luozt

Reputation: 569

Angular directives do not emit 'viewContentLoaded' event

I wrote a 'light-gallery' directive. It needs jquery.lightgallery.js plugin to initialize $.fn.lightGallery() functions which must do after the directive template compiled and loaded.

However, Angular directives do not emit 'viewContentLoaded' event in the link function. So I want to ask how I can know when the directives templates compiled and loaded?

Now I used $timeout to listen for a scope value if it has been compiled. When the scope value has been compiled, the oncompiled function can be run. Look:

myApp.directive("light-gallery", function(){
  return {
    restrict: "E",
    scope: {},
    replace: true,
    template: '<div compiled="{{compiled}}"></div>',
    link: function(scope, elem, attrs){
      var onCompiled = function(){
        $("#lightgallery").lightGallery();
      };

      var recur = function(){ 
        // when the attr `compiled` values `true`
        // it means template compiled and loaded
        if("true" === elem.attr("compiled")){
          onCompiled();
        }else{
          setTimeout(recur, 100);
        }
      };
      recur();

      // to tell template compiled
      scope.compiled = true
    }
  }
})

Is that method right and regular? Or how should I write regularly?

Thanks!

Upvotes: 1

Views: 1141

Answers (1)

user5488195
user5488195

Reputation: 11

What you looking for is $timeout(fn).
The fn will be called after your controller rendered.

Upvotes: 1

Related Questions