AngularJS 指令执行顺序

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

1、遇到的问题

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

<rating max-stars='var'></rating>

<script type="text/javascript">
        var app = angular.module('app', []);
        app.controller('ratingController',function ($scope) {
            $scope.var="123";
            console.log('外部控制器初始化');
        }).directive('rating', function () {
            console.log("指令初始化");
            return {
                restrict: 'E',
                scope: {
                    maxStars: '='
                },
                controller: 'ratingController',
                link: function (scope, el, attrs) {
                    console.log('link函数',scope.maxStars);
                }
            };   
        });
</script>

• 控制台输出结果

图片.png

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

2、 指令执行的顺序

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

<div ng-controller="ratingController">
    <rating ></rating>
</div>

<script type="text/javascript">
        var app = angular.module('app', []);
        app.controller('ratingController',function ($scope) {
            console.log('外部控制器');
        }).directive('rating', function () {
            console.log("指令初始化");
            return {
                restrict: 'E',
                scope: {
                    maxStars: '='
                },
                //controller: 'ratingController',
                controller:function(){
                    console.log("内部控制器");
                },
                link: function (scope, el, attrs) {
                    console.log('link');
                }
            };   
        });
</script>

• 执行结果

执行结果.png

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

3、问题解决办法

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

//模板
 <my-nav-child  nav-child-product="navChildProduct"></my-nav-child>

//配置系统初始需要的数据      定义变量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执行要比指令初始化早。

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