Initialization of directive failed to occur properly

Question

Initialization of directive failed to occur properly

Utilizing the angular-ui-bootstrap tabs directive, I tried to create tabs. However, upon logging each controller and link function, the initialization order appears incorrect.

Expected Order

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

Actual Result

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

It is evident that the outer directive initializes the link with the controller simultaneously, instead of linking after the inner directive has been initialized.

Visit the plunker and examine the console for more information.

javascript angularjs angularjs-directive angularjs-scope

Answer 1

Answer №1

Make sure to place your link-function within the $timeout service. Take a look at this example

// Update: Incorporate $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) {
      // Update: wrap 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 UPDATE
    }
  };
})

Answer 2

Make sure to place your link-function within the $timeout service. Take a look at this example

// Update: Incorporate $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) {
      // Update: wrap 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 UPDATE
    }
  };
})

Answer 3

Answer №2

After some investigation, I have identified the root cause of the issue - the ng-repeat functionality is at fault. Despite this discovery, I plan to inquire further by posing a new question related to the problem.

Answer 4

After some investigation, I have identified the root cause of the issue - the ng-repeat functionality is at fault. Despite this discovery, I plan to inquire further by posing a new question related to the problem.

Initialization of directive failed to occur properly

Answer №1

Answer №2

Similar questions

JavaScript middleware not detected

Issue with rendering components list in React.js

Enhancing Luxon DateTime with extension type support

Modifying the chart width in Chart.js: A step-by-step guide

What is the method for achieving the equivalent effect of "background-size: cover" on an <img>?

Tips for avoiding parent div click interference in Angular

Tips for retrieving data from a database with just one key press

What aspects of MongoDB security am I overlooking?

Commencing with the development of single-page applications

Time picker in Bootstrap - Ensuring end time is not earlier than start time validation

What is the most effective way to transfer parameters from an Angular controller or service to a server route and use them to query a

Looking for a Hack to Integrate a Music Player into Your Website?

Attention: React is unable to identify the `pId` property on a DOM element

Creating a nested list component using an array of objects

Issue with alert dismissal button not visible

react.js function that returns 'undefined'

What is the best method for aggregating multiple JSON responses into a single array?

Retrieve the value of a CSS class property regardless of whether it is actively being utilized

A Guide to Accessing Numbered Properties within an Object

Intermittent Cloudfront Content Delivery Network (CDN) disruptions (monitoring) - Implementing CDN Fail