AngularJS 指令执行顺序

今天在做一个小demo时遇到了一个问题，开始还以为是作用域的问题，后来发现是因为指令执行顺序导致的。

1、遇到的问题

• 先看看我的问题吧！这是我运行的代码。

• 控制台输出结果

图片.png

• 问题原因分析：
  控制台输出 undefined ,是因为指令初始化要比控制器初始化早，当指令初始化，执行指令 ，此时控制器还没有初始化，并没有var这个变量，所以会出现undefined。

2、 指令执行的顺序

• 现在我们看看指令执行的顺序是什么样的，先看一段代码吧！

• 执行结果

执行结果.png

• 从控制台可以看出，指令初始化比控制器初始化早，内部的控制器初始化比链接函数更早执行。

3、问题解决办法

如果想要获得变量，可以在系统初始的时候定义变量并给变量赋值。

//模板
 

//配置系统初始需要的数据      定义变量navChildProduct并赋值给这个变量
 app.run(function($rootScope,classifySer){
        classifySer.get({id:'product'},function(data){
            $rootScope.navChildProduct=data.products;
            console.log('run');
          });
 });
//指令  
.directive('myNavChild',function(){
        console.log('指令初始化');
              return{
                restrict:'AE',
                templateUrl:'js/view/navChild.html',
                replace:true,
                scope:{
                   navChildProduct:'='
                },
                link:function(scope,elem,attrs){
                    console.log('link');
                    console.log(scope.navChildProduct);
                }
              }
       });
       

运行结果

结果.png

从控制台中可以看出，run执行要比指令初始化早。

遇到这个问题查了很多资料，也没有查到满意的结果，上面的分析就是我的理解，不知道是不是这样，伙伴们如果发现什么问题或者有更好解决问题的办法，欢迎评论哦！