Rendering Order of Angular Directives with templateURL

Question

I have the following scenario, simplified in jsFiddle

I'm trying to run some code in the parent wizard element, after all steps in it rendered. in this context, console logs are generated as they should: 1. step1. 2. step2. 3. wizard.

However, when i change the template of any step to a templateURL with an actual HTML, the order is getting messed up and i cannot figure out a way to make sure that functionality in wizard is running last.

I have tried this concept in the wizard directive but it still doesn't work for me.

$timeout(function () {
    //DOM has finished rendering
});

Is there a known solution for this?

Answer 1

I made a jsfiddle with the answer. http://jsfiddle.net/KyEr3/1746/ However, I don't see why you would need to do this. Basically, you could have a service track the init count to ensure both directives have initialized. Watch the value of this tracker, and test it when it changes. Kazam.

Because services are singletons and persistent, you may want to reset the count to zero when the wizard directive initializes.

Here's the code:

    var myApp = angular.module('myApp', []);

myApp.service("initState", function(){
return{
    initCount:0,
  finishStep:function(){
    this.initCount++;
  }
}

});

myApp.directive("wizard",function(initState){
    return {
    link: function($scope){
        $scope.$watch(function(){
        return initState.initCount;
      }, function(){
      console.log('init count', initState.initCount );
        if( initState.initCount === 2){
            console.log('link on wizard');
        }
      })

    },
        restrict: "E",
        template: "<step-1></step-1><step-2></step-2>"
    }
});

myApp.directive("step1", function(initState){
    return {
    link: function(){
        console.log('link on step1');
      initState.finishStep();
    },
        restrict: "E",
        template: "<h1>Step1</h1>"
    }
});

myApp.directive("step2", function(initState){
    return {
    link: function(){
        console.log('link on step2');
       initState.finishStep();
    },
        restrict: "E",
        template: "<h1>Step2</h1>"
    }
});