How to bind a custom directive attribute value to an isolated scope in angular

Question

    app.directive('myCustomAttr',function() {
    return {
        restrict: 'A',
        scope: {
            valueOfAttr : "@myCustomAttr"
        },
      };
});

How would I pass the value of the attribute? Thus far, I've only found examples that use restrict : 'E'.

<input type="text" my-custom-attr="myValue" />

So, if I were going to bind "myValue" to the scope, how would I do that?

[EDIT]

Sorry, I had a typo. I was using the my-custom-attribute correctly, but it still doesn't seem to bind in the directive.

valueOfAttr : "=myCustomAttr" should provide two way binding. Not my code, see: jsfiddle.net/bcaudan/SbrKj — user2616232
– user2616232, Commented Dec 29, 2016 at 9:15

Community · Accepted Answer · 2017-05-23 12:24:55Z

1

I'm pretty sure you want =myCustomAttr instead of @myCustomAttr. There's mention of this under "Isolating the Scope of a Directive". There's also more information here.

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Jun 19, 2014 at 13:04

Daniel

5901 gold badge9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Diego · Accepted Answer · 2014-05-07 19:53:41Z

0

use the link function:

link: function (scope, element, attrs) {
   var myAttr = attrs["myCustomAttr"];
}

answered May 7, 2014 at 19:53

Diego

6767 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to bind a custom directive attribute value to an isolated scope in angular

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related