AngularJS directive for attributes. Steps for adding a second attribute directive during compilation phase

Question

AngularJS directive for attributes. Steps for adding a second attribute directive during compilation phase

I am interested in creating an attribute directive that adds an icon to a button when it is disabled.

Click here to see a similar example on Fiddle

In addition, I would like to include the ng-disabled directive during the compile process (with the value of disabled-button).

What is the most effective approach for this?

When I tried adding the ng-disabled attribute in the compile function, it did not compile. Therefore, if I re-compile my element in the link function, I encounter errors such as having to remove the ng-tranclude directive and triggering events like ng-click twice.

Bonus question: Can I restrict my attribute directive to only apply to html elements like <a> or <button>?

Thank you.

javascript angularjs angularjs-directive

Answer 1

Answer №1

It is not possible to dynamically add directives to the element that contains your directive. This is because the compile function is called after Angular has already processed the element and attached any directives to it. Trying to add another attribute at this stage is too late, as the discovery process has already been completed.

While there may be alternative methods that I am unaware of, I am open to exploring any stable solutions that are not considered hacks.

One suggestion I can offer is to manually include ng-disabled on the button, but let the expression of ng-disabled control your directive, like so:

<button ng-click="ctrl.click()" ng-disabled="ctrl.disabled" disabled-button>

Here is an example of the directive code:

.directive('disabledButton', function($parse) {
    return {
        restrict: 'A',
        transclude: true,
        scope: {
        },
        template: '<span ng-show="disabled">X</span><span ng-transclude></span>',
        link: function (scope, elem, attrs) {
            var disabled = $parse(attrs.ngDisabled);
            scope.disabled = false;
            scope.$watch(
                function() {
                    return disabled(scope.$parent);
                },
                function(newval) {
                    scope.disabled = newval;
                }
            );
        }
    };
})

Check out the Fiddle for a demonstration: http://jsfiddle.net/3orwupo5/1/

Alternatively, you can manually set the disabled property of the button like in this example: http://jsfiddle.net/y5ezvj5L/

Answer 2

It is not possible to dynamically add directives to the element that contains your directive. This is because the compile function is called after Angular has already processed the element and attached any directives to it. Trying to add another attribute at this stage is too late, as the discovery process has already been completed.

While there may be alternative methods that I am unaware of, I am open to exploring any stable solutions that are not considered hacks.

One suggestion I can offer is to manually include ng-disabled on the button, but let the expression of ng-disabled control your directive, like so:

<button ng-click="ctrl.click()" ng-disabled="ctrl.disabled" disabled-button>

Here is an example of the directive code:

.directive('disabledButton', function($parse) {
    return {
        restrict: 'A',
        transclude: true,
        scope: {
        },
        template: '<span ng-show="disabled">X</span><span ng-transclude></span>',
        link: function (scope, elem, attrs) {
            var disabled = $parse(attrs.ngDisabled);
            scope.disabled = false;
            scope.$watch(
                function() {
                    return disabled(scope.$parent);
                },
                function(newval) {
                    scope.disabled = newval;
                }
            );
        }
    };
})

Check out the Fiddle for a demonstration: http://jsfiddle.net/3orwupo5/1/

Alternatively, you can manually set the disabled property of the button like in this example: http://jsfiddle.net/y5ezvj5L/

AngularJS directive for attributes. Steps for adding a second attribute directive during compilation phase

Answer №1

Similar questions

Using jQuery .css({}) is not causing negative margin to function as expected

Using jQuery to show/hide linked CSS3 animations upon Mouseenter/Mouseleave events

Utilizing a combination of PHP and jQuery, certain checkbox options were dynamically deactivated

Learn how to pass an id from the query parameters to the getInitialProps function in Next.js

Blue Jay Guarantees: Construct props object on the fly and execute simultaneously

steps to attach click event to row of a-table component in ant design vue

Unpacking the information in React

Steps for verifying the existence of a value within an array in relation to another object and generating a new object based on the result

Having difficulty with my async custom react hooks. Is there a way to wait for the result of one hook before using it in another hook?

Using a function as a parameter in Typescript: Anticipated no arguments, received 1.ts

Guide to updating information in Firestore using Node.js, embedded in a map array

Unsure of the best way to approach pagination using {$.getJSON, php image array} - seeking guidance on the right

What is the best way to set up the login page and logged-in homepage using Node, Express, and Passport with the "/" route?

The controls for the Bootstrap carousel component do not have a clear appearance

Error in GatsbyJS: Unable to retrieve data from property 'childImageFluid' due to undefined value

Merge various observables into a unified RxJS stream

Exploring Twig variables in Node.js with the node-twig package

`What can be done if ng-if is not responding?`

The contents of the div disappear when using jQuery to extract it from a string

Javascript unable to access SVG element content on mobile Safari