CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
Lukas Chen
Lukas Chen

Reputation: 383

Directive not init properly

I Use the angular-ui-bootsrap tabs directive to create the tabs. But when I console.log on each controller and link function, the initialize order is not correct.

I Expect

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

The Result

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

As you can see the outer directive have init the link with the controller at the same time, not linking after the inner directive has been initialize.

Go to the plunker and check the console.

Upvotes: 0

Views: 82

Answers (2)

Lukas Chen
Lukas Chen

Reputation: 383

I have found the problem. It is the ng-repeat that is causing this issue. However I am going to ask another question about this problem.

Upvotes: 0

Dmitriy Borisov
Dmitriy Borisov

Reputation: 598

Put your link-function in $timeout service. See the 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
    }
  };
})

Upvotes: 1

Related Questions