Scope (scope) of the ANGULARJS directive

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 , {} false ; By default.

1.scope = False

JS Code:

HTML code:

Result

Modify the contents of the text box, the two names will change, in fact, the same $scope is modified by the Name property.

2. Scope=true

Modify the JS code above to change the command: scope:falsescope:true

Then we try to write some strings in our input box, and we find that the one in the instruction has changed, but the one input name outside the instruction has name not changed, which indicates a problem.

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.

3. scope={}

When we scope set it to {} , it means that we create a new scope that is isolated from the parent scope, which allows us to work without knowing the external environment and not depend on the external environment.

JS Code:

HTML code:

Result

Modify text box content only the name in the instruction will be modified.

Binding form:

Scope: {@=&}

@

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.

Scope (scope) of the ANGULARJS directive