Custom directive - Illegal use of ngTransclude directive in the template

Question

I used this directive to prevent double clicks.

my code:

export function cbOneClickOnly($parse, $compile): ng.IDirective {
    "use strict";
    return {
        compile: function(tElement: ng.IAugmentedJQuery, tAttrs: ng.IAttributes) {
            if (tAttrs.ngClick) {
                throw "Cannot have both ng-click and cb-one-click-only on an element";
            }
            tElement.attr("ng-click", "oneClick($event)");
            tElement.attr("ng-dblclick", "dblClickStopper($event)");
            tElement.removeAttr("cb-one-click-only");
            let theClickFunctionToRun = $parse(tAttrs["cbOneClickOnly"]);
            return {
                pre: function(scope: ng.IScope, iElement: ng.IAugmentedJQuery) {
                    let hasBeenClicked: boolean = false;
                    scope.oneClick = function(event: Event) {
                        if (hasBeenClicked) {
                            throw "Already clicked";
                        }
                        hasBeenClicked = true;
                        $(event.srcElement).attr("disabled", "disabled");
                        theClickFunctionToRun(scope, { $event: event });
                        return true;
                    };
                    scope.dblClickStopper = function(event: Event) {
                        event.preventDefault();
                        throw "Double click not allowed!";
                    };
                    $compile(iElement)(scope);
                }
            };
        },
        restrict: "A",
        scope: true
    };
}

which then gets added to the app like so:

angular.module(moduleId, []).directive("cbOneClickOnly", ["$parse", "$compile", cbOneClickOnly])

and is used like so:

<md-button class="md-accent" cb-one-click-only="$ctrl.itemSaveClicked(item)">
     Save
</md-button>

But I get this error:

> Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in
> the template! No parent directive that requires a transclusion found.
> Element: <!-- ngIf: $ctrl.isSaveDisplayed() -->
> https://errors.angularjs.org/1.7.5/ngTransclude/orphan?p0=%3C!--%20ngIf%3A%20%24ctrl.isSaveDisplayed()%20--%3E
>     at eval (angular.js:138)
>     at Object.ngTranscludePostLink (angular.js:34687)
>     at eval (angular.js:1365)
>     at invokeLinkFn (angular.js:11235)
>     at nodeLinkFn (angular.js:10554)
>     at compositeLinkFn (angular.js:9801)
>     at publicLinkFn (angular.js:9666)
>     at lazyCompilation (angular.js:10080)
>     at boundTranscludeFn (angular.js:9844)
>     at controllersBoundTransclude (angular.js:10604) "<!-- ngIf: $ctrl.isSaveDisplayed() -->"

This solution addresses my problem, but on a directive that has html, which mine does not.

I manually removed the ng-transclude like this: iElement.removeAttr("ng-transclude"); and that caused the text inside the button to disappear.

What is the solution for this style of directive which has no template?

BeniaminoBaggins · Answer 1 · 2018-12-11T20:50:26.273

It was a timing issue as this solution says.

The easy solution was really to remove the ng-transclude attribute, since I obviously didn't need it in my attribute directive.

iElement.removeAttr("ng-transclude");
$compile(iElement)(scope);

That then removed the ng-transclude attribute from the parent, the button itself (not ideal - it removed the text on the button). Which was a timing issue, because it ran before the button was loaded.

To make it run after the button is loaded I just changed pre to post inside the compile.

Eg..

return { 
         pre: function(scope: ng.IScope, iElement: ng.IAugmentedJQuery) {
             let hasBeenClicked: boolean = false;...

becomes

return { 
         post: function(scope: ng.IScope, iElement: ng.IAugmentedJQuery) {
             let hasBeenClicked: boolean = false;...

final solution:

export function cbOneClickOnly($parse, $compile): ng.IDirective {
    "use strict";
    return {
        compile: function(tElement: ng.IAugmentedJQuery, tAttrs: ng.IAttributes) {
            delete tAttrs.ngTransclude;
            if (tAttrs.ngClick) {
                throw "Cannot have both ng-click and cb-one-click-only on an element";
            }
            tElement.attr("ng-click", "oneClick($event)");
            tElement.attr("ng-dblclick", "dblClickStopper($event)");
            tElement.removeAttr("cb-one-click-only");
            let theClickFunctionToRun = $parse(tAttrs["cbOneClickOnly"]);
            return {
                post: function(scope: ng.IScope, iElement: ng.IAugmentedJQuery) {
                    let hasBeenClicked: boolean = false;
                    scope.oneClick = function(event: Event) {
                        if (hasBeenClicked) {
                            throw "Already clicked";
                        }
                        hasBeenClicked = true;
                        $(event.srcElement).attr("disabled", "disabled");
                        theClickFunctionToRun(scope, { $event: event });
                        return true;
                    };
                    scope.dblClickStopper = function(event: Event) {
                        event.preventDefault();
                        throw "Double click not allowed!";
                    };
                    iElement.removeAttr("ng-transclude");
                    $compile(iElement)(scope);
                }
            };
        },
        restrict: "A",
        scope: true
    };
}

Custom directive - Illegal use of ngTransclude directive in the template

1 Answers1