Angular指令不会发出'viewContentLoaded'事件

Question

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!

Answer 1

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