AngularJS：以正确的顺序从控制器和指令链接执行$ timeout回调

Question

I have this simple app with a custom directive and it's controller:

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(){
    });
});

Both the directive's link function and controller contains a timeout callback which in the case above will be executed in this order: ctrl's function then link's function. See here: https://codepen.io/neptune01/pen/EoxgvV

What I need is to ensure that the timeout callback in the controller is executed after the one from the directive's link. How do I do that?

Answer 1

The initialization of the directive is composed of these 4 events in the same order:

1. compile
2. controller
3. pre-link
4. post-link

So, you need to move that timeout to the compile function instead to get it executed prior to controller initialization.

Answer 2

Probably if you have some event in directive, you can bind that element and on change, you can do timeout. If you have variable you can use $watch or if you have some other event you can use $on and $emit to emit that event to controller. It's not pretty solution, but it can work.

Answer 3

You can broadcast from the link when the timeout is done

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');
  });
});