指令未正确启动
问题描述:
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并检查控制台。
答
把你的链接函数放在$ 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
}
};
})
答
我已经找到了问题。这是造成这个问题的ng重复。不过,我会问关于这个问题的另一个问题。
超时会起作用,但有没有比超时更清洁的方法?为什么会发生这种情况? –