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