Pedr Pedr - 4 months ago 34
Javascript Question

How do I pass multiple attributes into an Angular.js attribute directive?

I have an attribute directive restricted as follows:

restrict: "A"


I need to pass in two attributes; a number and a function/callback, accessing them within the directive using the
attrs
object.

If the directive was an element directive, restricted with
"E"
I could to this:

<example-directive example-number="99" example-function="exampleCallback()">


However, for reasons I won't go into I need the directive to be an attribute directive.

How do I pass multiple attributes into an attribute directive?

Answer

The directive can access any attribute that is defined on the same element, even if the directive itself is not the element.

Template:

<div example-directive example-number="99" example-function="exampleCallback()"></div>

Directive:

app.directive('exampleDirective ', function () {
    return {
        restrict: 'A',   // 'A' is the default, so you could remove this line
        scope: {
            callback : '&exampleFunction',
        },
        link: function (scope, element, attrs) {
            var num = scope.$eval(attrs.exampleNumber);
            console.log('number=',num);
            scope.callback();  // calls exampleCallback()
        }
    };
});

fiddle

If the value of attribute example-number will be hard-coded, I suggest using $eval once, and storing the value. Variable num will have the correct type (a number).

Comments