升级AngularJS至1.6.9后，指令无法及时识别父控制器vm问题排查

兄弟，我刚好对AngularJS 1.x的升级坑比较熟，你遇到的这个问题大概率是1.6版本对控制器/指令的生命周期时序做了更严格的规范导致的——简单说就是父控制器的vm属性初始化时机，和指令的初始化逻辑时序对不上了，之前旧版本的宽松时序让你没碰到这个问题，现在1.6把这个规则收紧了。

下面是具体的排查方向和解决办法：

1. 先检查父控制器的初始化代码放哪儿了 #

AngularJS从1.3开始就推荐把控制器的初始化逻辑（比如给vm赋值、加载数据这些）放在$onInit钩子里面，而不是直接写在控制器的构造函数里。如果你的父控制器之前是直接在构造函数里给vm加属性，升级后可能子指令的初始化跑在了父控制器的某些初始化逻辑前面，导致拿不到值。

之前可能的错误写法： #

angular.module('app').controller('ParentCtrl', function() {
  var vm = this;
  // 直接在构造函数里赋值，万一这是个异步操作，子指令先初始化就拿不到
  vm.data = fetchSomeData();
});

改成规范写法： #

angular.module('app').controller('ParentCtrl', function() {
  var vm = this;
  
  vm.$onInit = function() {
    // 所有初始化逻辑都放这儿，确保子指令准备好前，父控制器的属性已经就绪
    vm.data = fetchSomeData();
  };
});

2. 子指令别着急在构造函数里访问父vm #

指令的控制器构造函数、compile函数这些，执行时机都比$onInit早。如果你的子指令在这些阶段直接去拿父控制器的vm属性，那时候父控制器的$onInit可能还没跑完，自然拿不到值，得等指令的工厂函数退出后，父控制器的初始化才完成，这时候才能拿到。

之前的错误写法： #

angular.module('app').directive('childDirective', function() {
  return {
    controller: function($scope) {
      // 构造函数里直接访问，大概率是undefined
      console.log($scope.parentVm.data);
    },
    scope: {
      parentVm: '<'
    },
    controllerAs: 'vm'
  };
});

改成在$onInit里访问： #

angular.module('app').directive('childDirective', function() {
  return {
    controller: function() {
      var vm = this;
      
      vm.$onInit = function() {
        // 这时候父控制器的$onInit已经执行完了，属性肯定就绪
        console.log(vm.parentVm.data);
      };
    },
    scope: {
      parentVm: '<'
    },
    controllerAs: 'vm',
    bindToController: true // 这个必须加！不然scope绑定的属性挂不到vm上
  };
});

3. 别忘了设置bindToController: true #

在1.6里，指令的bindToController默认是false，但组件默认是true。如果你的指令需要把scope绑定的属性挂载到控制器的vm上，必须显式设这个值，不然你在控制器里通过vm拿不到绑定的属性，得等到link阶段才会出现在$scope里，这也会导致你觉得父vm“晚一步”才就绪。

4. 检查指令的优先级和终端属性 #

如果你的指令设了priority（优先级）或者terminal: true，可能会打乱父控制器的初始化顺序。可以先把这些属性去掉试试，要是问题解决了，再根据需求调整优先级或者终端属性的设置。

5. 异步操作的时序也要排查 #

如果父控制器的vm属性是通过$http这类异步请求获取的，升级后AngularJS的异步处理时机可能有变化。可以在请求的回调里加个$scope.$apply()（如果回调不在Angular的上下文里），或者用ng-if控制指令的渲染时机，等数据加载完再渲染指令：

<div child-directive ng-if="parentVm.data"></div>

内容的提问来源于stack exchange，提问作者ashilon