Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Need for value attribute in directive 'scope'

I was going through the process of creating a directive. Having gone through a few ups and downs I got through creating the directive ( widget ) and was finalizing the various attributes the directive will take.

I used the various options available like attribute, bind, evaluate, expression etc..

What I figured was that if you want to create a generic component, you can never tell how people will pass values to the the component.

Here is an illustration...

You are creating a new element component.. say

<hello name="__ARGUMENT__"></hello>

The name attribute for hello is the only variable in it. If you give it out to the public... these are the possible scenarios with which people may use this component.

case 1 :

<hello name="angular"></hello>

case 2 :

<hello name="{{name}}"></hello> 

case 3 :

<div ng-repeat="name in names">
    <hello name="name"></hello> 
</div>

Now.. for different scenarios.. I have come to understand the various options provided. I cant think of a single scenario where you would ever want the 'attribute' since its a simple direct substitution of values from component to the template..

In your directive definition if you had defined the name as 'evaluate' instead of 'attribute'

if attribute :

<hello name="angular"></hello>

if evaluate :

<hello name="'angular'"></hello>

note the extra single quotes..

So as far as I can tell evaluate covers what attribute does.. And, using evaluate seems to be a better choice than just attribute since it covers more scenarios!

If someone can explain why attribute exists in the first place? More choices = more confusion.. :)

like image 666
ganaraj Avatar asked May 30 '12 13:05

ganaraj


People also ask

What is attrs in AngularJS?

scope is an AngularJS scope object. element is the jqLite-wrapped element that this directive matches. attrs is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values. controller is the directive's required controller instance(s) or its own controller (if any).

What is restrict in AngularJS directive?

Directives are a special type of AngularJS component used to extend the functionality of an HTML element or create new features with a rich behavior that is not available using pure HTML. AngularJS includes pre-built directives like ngBind , ngModel , and ngClass .

How is scope in directive different from scope in controller?

By default, directives do not create their own scope; instead they use the scope of their parent, generally a controller (within the scope of which the directive is defined). We can change the default scope of the directive using the scope field of the DDO (Data Definition Object).


1 Answers

We are well aware of this confusion, and will be cleaning it up in the future.

like image 82
Misko Hevery Avatar answered Sep 27 '22 20:09

Misko Hevery