CODEWITHSUNDEEP
angularjs
Joe Berthelot
Joe Berthelot

Reputation: 735

How to pass id of element into a directive with AngularJS

This is really basic and my first directive but I'm having a hard time figuring it out. Here's my directive:

app.directive('rotateIcon', rotateIcon);

rotateIcon.$inject = ['$timeout'];

function rotateIcon() {
    return {
        link: function (event) {
            console.log(angular.element(event.target).attr('id'));
        }
    };
}

And my HTML snippet:

<i class="fas fa-sync-alt"
          id="wallet-refresh"
          ng-click="vm.setBalance();"
          rotate-icon></i>

How do I capture the id of my <i> as a variable inside of the directive?

Upvotes: 2

Views: 652

Answers (2)

Aref Zamani
Aref Zamani

Reputation: 2062

you can use 

 scope: {
        id: '=',
    },

in directive 

   app.directive('rotateIcon', rotateIcon);

    rotateIcon.$inject = ['$timeout'];

    function rotateIcon() {
        return {
 scope: {
        id: '=',
       },
            link: function (element) {
                console.log(element.attr('id'));
            }
        };
    }

and your html tag :

<i class="fas fa-sync-alt"
          id="wallet-refresh"
          ng-click="vm.setBalance();"
          rotate-icon></i>

Upvotes: 0

bresleveloper
bresleveloper

Reputation: 6070

from the docs linking function accepts 4 arguments, scope, element, attrs, ctrl, so in the 3rd argument you just have the id, or any other attribute the element has like this attrs.id

for example you can also give rotate-icon a value like rotate-icon="val1" and use it like attrs.rotateIcon

Upvotes: 1

Related Questions