Geek Answers Handbook

AngularJS documentation for isolation attributes

Is there any AngularJS documentation that provides a simple final list of ways to handle attributes in a directive with a selection scope?

The guideline covers the use of = , but does not list other parameters used for binding.

So far I know (through mixed sources):

 scope: { myAttr1: '=attr1', myAttr2: '=?attr2', myAttr3: '@attr3', myAttr4: '&attr4' },
+6
source share
2 answers

look at the compilation service: http://docs.angularjs.org/api/ng.$compile

The "isolate" area accepts a hash of an object that defines the set of properties of the local area obtained from the parent area. These local properties are useful for template alias values. Defining local locales is a hash of the local scope property to its source:

@ or @attr - bind a local area property to the value of the DOM attribute. The result is always a string, because the DOM attributes are strings. If attr is not specified, the attribute name is assumed to match the local name. The defined and visible scope definition is {localName: '@myAttr'}, then the scope widget localName property will display the interpolated value hello {{name}}. As the attribute changes, name will have the localName property in the widget area. The name is read from the parent scope (not for the component scope).

= or = attr - set a bi-directional binding between the local property of scope and the property of the parent scope of the name, determined by the value of the attr attribute. If attr is not specified, the attribute name is assumed to match the local name. The defined and visible scope definition is {localModel: '= myAttr'}, then the scope widget localModel property will display the parentModel value in the parent scope. Any changes to parentModel will be reflected in localModel, and any changes to localModel will be displayed in parentModel. If the property of the parent scope does not exist, it throws a NON_ASSIGNABLE_MODEL_EXPRESSION exception. You can avoid this behavior by using =? or =? attr to indicate the property is optional.

& or & attr - provides a way to execute an expression in the context of the parent scope. If attr is not specified, the attribute name is assumed to match the local name. The defined and visible scope definition is: {localFn: '& myAttr'}, then the isolate scope property localFn will point to the function wrapper for the expression count = count + value. It is often desirable to transfer data from an isolated area through an expression to the parent area, this can be done by passing a map of local variable names and values ​​to the shell of the fn expression. For example, if the expression is an increment (quantity), we can specify the value of the sum by calling localFn as localFn ({amount: 22}).

+8
source

You can also see outdated directive documentation. I think the new is better understood, but the older has more meat.

http://code.angularjs.org/1.1.5/docs/guide/directive

+1
source

More articles:


All Articles