使用templateURL的角度指令的渲染顺序

Question

我有以下情况，在jsFiddle中简化了

在呈现所有步骤之后 ，我尝试在父向导元素中运行一些代码。 在这种情况下，将按如下方式生成控制台日志：1. step1。 2. step2。 3.向导。

但是，当我将任何步骤的模板更改为带有实际HTML的templateURL时，顺序变得一团糟，并且我无法找出一种方法来确保向导中的功能最后运行。

我已经在向导指令中尝试过这个概念，但是它对我仍然不起作用。

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

是否有已知的解决方案？

Answer 1

我用答案做了一个jsfiddle。 http://jsfiddle.net/KyEr3/1746/但是，我不明白为什么您需要这样做。 基本上，您可以让服务跟踪初始化计数，以确保两个指令都已初始化。 观察此跟踪器的值，并在其更改时对其进行测试。 卡赞

因为服务是单例的并且是持久性的，所以您可能希望在初始化向导指令时将计数重置为零。

这是代码：

    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>"
    }
});