指令未正确初始化

Directive not init properly

本文关键字：初始化 指令      更新时间：2023-09-26

I 使用 angular-ui-bootsrap 选项卡指令来创建选项卡。但是当我控制台时.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

如您所见，外部指令同时与控制器建立了 init 链接，而不是在初始化内部指令后进行链接。

转到 plunker 并检查控制台。

将链接函数放在$timeout服务中。看褶皱机

// 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 重复导致了此问题。但是，我要问另一个关于这个问题的问题。

相关文章：