The nested directive link function failed to execute and the controller was not recognized

Question

The nested directive link function failed to execute and the controller was not recognized

Apologies in advance for adding to the sea of 'mah directive link function isn't called!' posts on Stack Overflow, but none of the solutions seem to work for me.

I have a directive named sgMapHeader nested inside another directive called sgMap. sgMapHeader is not always present, so I append it and compile at sgMap's link time. Both directives share a controller. You can view a simplified version of my issue in this JSBin example.

In an ideal scenario, I would expect two things:

The inner directive's link function should be executed, logging 'hi there' to the console.
If I click on the 'hi there' text, 'hold' should be logged as well.

Unfortunately, neither of these expectations are met. I have tried adjusting the scope in different ways, but nothing seems to make a difference. Can anyone point out what I might be missing?

javascript angularjs angularjs-directive

Answer 1

Answer №1

The sgMapCtrl variable is not declared

controllerAs:'sgMapCtrl',

Please ensure that sgMap directive is properly defined

The following code snippet has been effective for me:

MODIFY

angular.module('map.directive', [])
.directive('sgMap', ['$compile', function($compile) {
    return {
        replace: false,
        template: '<section class="md-whitespace-2"></section>',
        scope: {
            header: '=header',                 // Whether to show the header. (bool)
        },
        restrict: 'E',
        controllerAs:'sgMapCtrl',
        controller: [function() {
            this.changeAction = function(action) {
                console.log(action);
            };
        }],
        link: function(scope, element, attrs) {
            // Add header?
            if (scope.header) {

                $compile('<sg-map-header></sg-map-header>')(scope, function(cloned, scope) {
                    element.append(cloned);
                });
            }
        }
    };
}])
.directive('sgMapHeader', [function() {
    'use strict';

    return {
        replace: false,
        restrict: 'E',
        require: '^sgMap',
        scope: false,
        template: '<div ng-click="sgMapCtrl.changeAction(\'hold\')">hi there</div>',
        link: ['$scope', 'sgMapCtrl', function($scope, sgMapCtrl) {
            sgMapCtrl.changeAction('<div>hi there</div>');
        }]
    };
}]);

angular.module('app', ['map.directive']);

Answer 2

The sgMapCtrl variable is not declared

controllerAs:'sgMapCtrl',

Please ensure that sgMap directive is properly defined

The following code snippet has been effective for me:

MODIFY

angular.module('map.directive', [])
.directive('sgMap', ['$compile', function($compile) {
    return {
        replace: false,
        template: '<section class="md-whitespace-2"></section>',
        scope: {
            header: '=header',                 // Whether to show the header. (bool)
        },
        restrict: 'E',
        controllerAs:'sgMapCtrl',
        controller: [function() {
            this.changeAction = function(action) {
                console.log(action);
            };
        }],
        link: function(scope, element, attrs) {
            // Add header?
            if (scope.header) {

                $compile('<sg-map-header></sg-map-header>')(scope, function(cloned, scope) {
                    element.append(cloned);
                });
            }
        }
    };
}])
.directive('sgMapHeader', [function() {
    'use strict';

    return {
        replace: false,
        restrict: 'E',
        require: '^sgMap',
        scope: false,
        template: '<div ng-click="sgMapCtrl.changeAction(\'hold\')">hi there</div>',
        link: ['$scope', 'sgMapCtrl', function($scope, sgMapCtrl) {
            sgMapCtrl.changeAction('<div>hi there</div>');
        }]
    };
}]);

angular.module('app', ['map.directive']);

Answer 3

Answer №2

First, make sure to append to the DOM before compiling.

        // Should we include a header?
        if (scope.header) {
            var $header = angular.element('<sg-map-header></sg-map-header>');
            element.append($header);
            $compile($header)(scope);
        }

When compiling sgMapDirective, it must be a child of sgMap in order for the compile process to work correctly. Otherwise, the compilation will not find sgMapDirective within the parent elements because it only exists in memory and not in the DOM.

Answer 4

First, make sure to append to the DOM before compiling.

        // Should we include a header?
        if (scope.header) {
            var $header = angular.element('<sg-map-header></sg-map-header>');
            element.append($header);
            $compile($header)(scope);
        }

When compiling sgMapDirective, it must be a child of sgMap in order for the compile process to work correctly. Otherwise, the compilation will not find sgMapDirective within the parent elements because it only exists in memory and not in the DOM.

The nested directive link function failed to execute and the controller was not recognized

Answer №1

Answer №2

Similar questions

Transfer numerical values from PHP to JavaScript using individual files

What could be causing certain javascript functions to not work properly?

Using a jQuery dialog to launch a popup window specifically optimized for Safari browsers

What is the process of encrypting a password using AngularJS on the client side, transferring it securely to the server through ExpressJS, and then decrypting it on the server

I am able to retrieve JSON data from the server using Angular, however, I am facing an

Rotate Chevron icon downwards on mobile devices in a Multilevel Dropdown Bootstrap 4

Is there a way to retrieve the objects generated by DirectionsRenderer on Google Maps V3?

Step-by-step guide on building a personalized rxjs operator using destructured parameters

Encountering a node.js issue

How to target the last child in Flexbox using CSS order property

What is the best way to display data in a React application depending on a boolean value?

React's Conditional Rendering

The art of controlling iframe elements with jquery

Choosing multiple images by clicking on their alternative text with jQuery

Error encountered when injecting factory into AngularJS controller

Error: The JSON in app.js is invalid due to the unexpected token "C" at position 0

What is the best way to show input choices once an option has been chosen from the 'select class' dropdown menu?

Clicking on a button in HTML to open a JavaScript file

Cross-Origin Resource Sharing (CORS) Issue: How Angular.JS, Node.JS, and

Tips for seamlessly incorporating a fresh ionic theme into your current ionic application