使用 templateURL 渲染 Angular 指令的顺序

Question

我有以下场景，简化为jsFiddle

我正在尝试在父向导元素中运行一些代码，在呈现其中的所有步骤之后。在这种情况下，会按应有的方式生成控制台日志： 1. 第一步。 2. 第二步。 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>"
    }
});