An AngularJS directive with itself as the attribute

03 September 2014   8 comments   AngularJS, Javascript

Mind That Age!

This blog post is 4 years old! Most likely, its content is outdated. Especially if it's technical.

Because this took me quite a while to figure out, I thought I'd share in case somebody else is falling into the same pit of confusion.

When you write an attribute directive in angularjs you might want to have it fed by an attribute value.
For example, something like this:

<div my-attribute="somevalue"></div>

How then do you create a new scope that takes that in? It's not obvious. Any here's how you do it:

app.directive('myAttribute', function() {
    return {
        restrict: 'A',
        scope: {
            myAttribute: '='
        },
        template: '<div style="font-weight:bold">{{ myAttribute | number:2 }}</div>'
    };
});

The trick to notice is that the "self attribute" because the name of the attribute in camel case.

Thanks @mythmon for helping me figure this out.

Comments

Sam
Thanks !!

That use case is almost never highligthed in docs and blogs, but very useful !!
Lisa
Thanks! Been looking all over for this piece of information.
Jupo
great, thanks
Anonymous
If your attribute contains text, use '@' instead of '='.
Anonymous
Thanks Peterbe! Thanks Anonymous!
Anonymous
Thank you
matscr
Im new to angularjs! THIS WAS GOLD! Been struggeling with passing values in directives. Thanks alot for this info that is nowhere to be found but here
Peter
great, thx
Thank you for posting a comment

Your email will never ever be published


Related posts

Previous:
set -ex - The most useful bash trick of the year 31 August 2014
Next:
Do you curl a lot to check headers? 05 September 2014
Related by Keyword:
What stumped me about AngularJS 12 May 2013
OpenID, Attribute Exchange, SReg, python-openid and Google 23 April 2010
The importance of the TITLE attribute 23 April 2008
Careful when dealing with options in IE 14 April 2006
Related by Text:
HTML Tree on Hacker News 18 May 2014
YouTube - Nigella's XXXmas 19 December 2008
How and why to use django-mongokit (aka. Django to MongoDB) 08 March 2010
How to track Google Analytics pageviews on non-web requests (with Python) 03 May 2016
hashin 0.7.0 and multiple packages 30 August 2016