StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I struggled a bit with this documentation too when first getting into angular, but I will make an attempt try to clarify things for you. First, when using this <code>scope</code> property, it creates an "isolated scope." All this means is that it won't inherit any properties from parent scopes, and so you don't have to worry about any collisions within the scope.</p> <p>Now, the '@' notation means that the evaluated value in the attribute will automatically get bound into your scope for the directive. So, <code><my-directive foo="bar" /></code> would end up with the scope having a property called <code>foo</code> that holds the string "bar". You could also do something like <code><my-directive foo="{{bar}}"</code> And then the evaluated value of <code>{{bar}}</code> will be bound to the scope. Since attributes are always strings, you will always end up with a string for this property in the scope when using this notation.</p> <p>The '=' notation basically provides a mechanism for passing an object into your directive. It always pulls this from the parent scope of the directive, so this attribute will never have the <code>{{}}</code>. So, if you have <code><my-directive foo="bar" /></code> it will bind whatever is in <code>$scope.bar</code> into your directive in the <code>foo</code> property of your directive's scope. Any change's you make to <code>foo</code> within your scope will be refelected in <code>bar</code> in the parent scope, and vice versa.</p> <p>I haven't used the '&' notation nearly as much as the other too, so I don't know it as well as those two. From what I understand, it allows you to evaluate expressions from the context of the parent scope. So if you have something like <code><my-directive foo="doStuff()" /></code>, whenever you call scope.foo() within your directive, it will call the doStuff function in the directive's parent scope. I'm sure there's a lot more you can do with this, but I'm not as familiar with it all. Maybe someone else can explain this one in more detail.</p> <p>If just the symbol is set in the scope, it will use the same name as the attribute to bind to the directives scope. For example:</p> <pre><code>scope: { foo1: '@', foo2: '=', foo3: '&' } </code></pre> <p>When including the directive, there would need to be the attributes foo1, foo2, and foo3. If you want a property in your scope different than the attribute name, you can specify that after the symbol. So, the example above would be</p> <pre><code>scope: { foo1: '@bar1', foo2: '=bar2', foo3: '&bar3' } </code></pre> <p>When including the directive, there would need to be the attributes bar1, bar2, and bar3, and these would get bound in the scope under properties foo1, foo2, and foo3 respectively.</p> <p>I hope this helps. Feel free to ask questions with which I can clarify my answer.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload