Scope (scope) of the AngularJS directive

Ref: 1190000002773689

Whenever an instruction is created, there is an option to inherit its own parent scope (typically the scope or root scope ($rootScope) provided by the external controller), or to create a new scope of its own, of course angularjs for our instructions. The scope parameters provide three choices, namely: false , true , {} ; by default false .

Scope = False

In this case, the variables in the parent scope can be used directly in the instruction template, and the function

Scope = True

When the scope property is set to true , this indicates that the instruction we created is to create a new scope that inherits from our parent scope.

1. When we scope set it up true , we create a new scope, except that the scope inherits our parent scope, and I think it's understandable that our newly created scope is a new scope, but at the time of initialization, The properties and methods of the parent scope are used to populate our new scope. It is not the same scope as the parent scope.
2. When we scope set it to false , the instruction we create and the parent scope (which is actually the same scope) share the same model model, so the model data is modified in the directive, and it is reflected in the model of the parent scope.

scope = {}

When we scope set the property to be {} , we can do more things.

One of the strongest big places in Angularjs is that it can be built and can be used wherever it is placed;
This is why this can be done, thanks to this attribute of the instruction, when we set it to a new scope that scope {} we created to isolate the parent scope, which allows us to work without knowing the external environment and not depend on the external environment.

We use an isolated scope, which does not mean that we cannot use the properties and methods of the parent scope.

1. We can bind the scope {} data by passing in a special prefix identifier (i.e. prefix ) to it.
2. In creating the scope of the isolation, we can pass @ , & referring to the = attributes of the elements of the application directive, as in the above code, we can use the <div class="my-directive" my-directive my-name="{{name}}" age="age" change-my-age="changeAge()"></div> prefix identifier in this element, by using the attribute my-name age change-my-age , To reference the values of these properties.

Let's take a look at how to use these prefix identifiers:

@

This is a single-bound prefix identifier
How to use: Use attributes in an element, like so <div my-directive my-name="{{name}}"></div> , notice that the name of the property is used to - connect two words, because it is a single binding of the data, so you bind the data by using it {{}} .

=

This is a bidirectional data binding prefix identifier
Usage: Using attributes in an element, like this <div my-directive age="age"></div> , note that the bidirectional binding of the data is = implemented by the prefix identifier, so it cannot be used {{}} .

&

This is the prefix identifier for a binding function method
How to use: Use attributes in an element, like so <div my-directive change-my-age="changeAge()"></div> , notice that the name of the property is used to - connect multiple words.

Note: In the scope object of the newly created instruction, use the name of the property to bind, using the Hump naming standard, such as the following code:

scope: {            //  ' MyName ' is the ' my-name ' attribute in the original element            name: ' @myName'             ,' = ',             // ' changemyage ' is the ' change-my-age ' attribute            in the original element Changeage: ' &changemyage '         }

Further, how do our instructions use these prefix identifiers to find the attributes or functions we want?

• @When the instruction is compiled into the template name , it will scope look for name the key-value pairs, if present, as above, and see @ that it is a one-way data binding, Then look for the original one using the command element (or the instruction element itself) containing the value of the property, and my-name={{name}} then in the parent scope to find {{name}} the value, get passed to the template name .
• =As & with @ almost, it's just a = two-way data binding, which changes the value of a property on a template or parent scope to change another value, rather than & a binding function.

Scope (scope) of the AngularJS directive