0

I使用angular-ui-bootsrap选项卡指令创建选项卡。但是当我在每个控制器和链接函数上使用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 

正如你所看到的外部指令已经初始化与控制器连接在同一时间,而不是内后连接指令已经初始化。

转到plunker并检查控制台。

回答

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

+0

超时会起作用,但有没有比超时更清洁的方法?为什么会发生这种情况? –

0

我已经找到了问题。这是造成这个问题的ng重复。不过,我会问关于这个问题的另一个问题。