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

Can the repeated use of AJAX function calls at regular intervals adversely affect the speed of the application?

The Node.js server delivers a different object to the client

What could be the reason for Jest flagging CSS as untested instead of identifying untested functions?

Automatically retrieve the generated PDF file upon completion (Node.js and Express)

Which API is utilized by duojs for its JavaScript modules?

The scripts are mistakenly interpreted as stylesheets, but are actually being transferred with the MIME type text/html

Does the require function in nodejs have any connection to the package.json file?

Interested in incorporating dynamic calendar entries in ASP C#?

Is it possible to change text dynamically with an input box using JavaScript?

Developing a unique JavaScript object by extracting information from a jQuery AJAX response

Tips for pinpointing parent elements within a group of various sub child elements

efforts to activate a "click" with the enter key are unsuccessful

transfer chosen data from a text box to a dropdown menu

Transmitting POST form information from an AngularJS client to an Express/Node.js server

The swf file doesn't stretch to fit the window when the height is set to 100%

Wait for the record to be inserted before refreshing the screen in AngularJS using C# WCF

What is the best way to switch the CSS class of a single element with a click in Angular 2

Issue encountered while attempting to adjust a date (the modification was incorrect)

The error message encountered is "Uncaught (in promise) Error: Unable to access attributes of an undefined object (reading 'launch')."

Efficiently styling table Spans with styled components in React