AngularJS, Directive

Question

I study AngularJS directives at this link: Directives

When i reached the last example about: Creating Directives that Communicate

I did find this line(from script.js):

title: '@' // Line 33 at the script.js

The problem is that i don't know what this line means, I do know that title is an isolated scope property but what is the @, I have learned that:

'=' is where the attribute name is the same as the value
'=info' where info is the attribute

But the documentation from the link above is not explaining what is the @, My best guess is that when the @ is the value, The value assigned to the title property is the value from the title attribute, But i am not so sure if anyone can help me understand what it is i will be very thankful, Thank you all and have a nice day.

egghead.io/lessons here is thing that is better documentation. See video about @ parameter. — Rantiev
– Rantiev, Commented Jan 25, 2014 at 15:11

Davin Tryon · Accepted Answer · 2014-01-25 15:14:01Z

4

@ is a type of isolated scope binding (like =). However, @ says to only take the value of the attribute and not create a two-way bind to the outer scope.

So, if you wanted to use some value in the directive, but this value did not change for the duration of that instance of the directive, then @ is a good choice.

A quick example would be if you wanted to set a color for a directive template:

<my-color-box color="red"></my-color-box>

Then, in the directive you use the attribute like this:

app.directive('myColorBox', function() {

   return {
      restrict: E,
      scope: {
         color: '@'
      },
      template: '<div style="background-color: {{color}}"></div>'
   }
});

edited Jan 25, 2014 at 15:14

answered Jan 25, 2014 at 15:08

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

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

2 Comments

Aviel Fedida Over a year ago

Thank you Davin, I think i got it now.

Davin Tryon Over a year ago

Can be tricky at first to understand, but once you start using them it will make sense.

Collectives™ on Stack Overflow

AngularJS, Directive

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related