AngularJS:以正确的顺序执行$超时回调和指令链接

Question

我有一个带有自定义指令的简单应用程序，它的控制器：

angular.module('app', [])
.directive('customDir', function($timeout){
  return {
        restrict: 'E',
        template: 'custom dir template',
        controller: 'customDirCtrl',
        link: function () {
          $timeout(function(){
            console.log('link');
          });
        }
  }
})
.controller('customDirCtrl', function($timeout) {
    $timeout(function(){
            console.log('ctrl');
          }).then(function(){
    });
});

指令的链接函数和控制器都包含一个超时回调，在上面的情况下将按以下顺序执行：ctrl的函数然后链接的函数。请参阅：https：//codepen.io/neptune01/pen/eoxgvv

我需要的是确保控制器中的超时回调是在指令的链接中执行的。我该怎么做？

Answer 1

该指令的初始化由这4个事件以相同的顺序组成：

1. 编译
2. 控制器
3. 预链接
4. 后链接

因此，您需要将超时转移到compile函数中，以在控制器初始化之前执行它。

Answer 2

可能会在指令中有某些事件，可以绑定该元素，并且可以在更改中，可以进行超时。如果您有变量，则可以使用$手表，或者如果您有其他活动，则可以使用$上的$和$发出该事件。这不是很好的解决方案，但可以工作。

Answer 3

您可以在超时完成后从链接中广播

angular.module('app', [])
.directive('customDir', function($timeout){
  return {
    restrict: 'E',
    template: 'custom dir template',
    controller: 'customDirCtrl',
    link: function ($scope) {
      $timeout(function(){
        console.log('link');
        $scope.$broadcast('linkTimeoutDone')            
      });
    }
 }
})
.controller('customDirCtrl', function($scope) {
  $scope.$on('linkTimeoutDone', function() {
    console.log('ctrl');
  });
});