javascript - 指令未正确初始化

Question

我使用 angular-ui-bootsrap tabs 指令来创建选项卡。但是当我在每个 Controller 和链接函数上console.log时，初始化顺序不正确。

我期待

outer - controller
Inner -  Controller
Inner -  Link
Inner -  Controller
Inner -  Link
Inner -  Controller
Inner -  Link
Inner -  Controller
Inner -  Link
outer -  Link

结果

outer - controller
outer -  Link
Inner -  Controller
Inner -  Link
Inner -  Controller
Inner -  Link
Inner -  Controller
Inner -  Link
Inner -  Controller
Inner -  Link

正如您所看到的，外部指令同时初始化了与 Controller 的链接，而不是在内部指令初始化后才链接。

转到plunker并检查控制台。

Answer 1

将您的链接函数放入 $timeout 服务中。请参阅plunker

// UPD: Add $timeout service
.directive('uibTabset', function($timeout) {
  return {
    transclude: true,
    replace: true,
    scope: {},
    bindToController: {
      active: '=?',
      type: '@'
    },
    controller: 'UibTabsetController',
    controllerAs: 'tabset',
    templateUrl: function(element, attrs) {
      return attrs.templateUrl || 'uib/template/tabs/tabset.html';
    },
    link: function(scope, element, attrs) {
      // UPD: put link-function in $timeout
      $timeout(function() {
        console.log("outer -  Link");
        
        scope.vertical = angular.isDefined(attrs.vertical) ?
          scope.$parent.$eval(attrs.vertical) : false;
        scope.justified = angular.isDefined(attrs.justified) ?
          scope.$parent.$eval(attrs.justified) : false;
        if (angular.isUndefined(attrs.active)) {
          scope.active = 0;
        }
      });
      // END UPD
    }
  };
})