You specified the isolate scope as
scope: {
attr: "=attributeName"
}
What that does is take the value of attributeName
specified in your html as an expression in your scope and bind that to attr
in your directive scope. But what you did was just to specify "hello"
without having a hello
object in your scope. To get it to work the way you have it now, you have to use the @
attribute binding like so:
scope: {
attr: "@attributeName"
}
The other change that you need to do is how you specify the value in the html. You use titleCase when you define the attribute, but in the html instead of titleCase you need to seperate the "words" by a dash and use all lowercase. So attributeName
becomes attribute-name
<node attribute-name="hello"></node>
On the other hand, if you actually want to bind to the value of an object in your scope, then make sure that you specify it in your scope and then you can use it in your directive (and preferably use the dot notation).
I have you updated your plunker to show you how they work.