Scope (scope) of the AngularJS directive

Whenever an instruction is created, there is a choice: to inherit its own parent scope (typically the scope provided by the external controller or the root scope ($rootScope)), or to create a new own scope. ANGULARJS provides three options for the scope parameter of the directive, namely: false,true,{}.

Scope = False (default)

When the scope parameter is false, the directive template can directly use variables, functions in the parent scope.
The code looks like this:

Angular.module ("MyApp", []). Controller ("Mycontroller",function($scope) {$scope. Name= "Dreamapple"; $scope. Age= 20; $scope. Changeage=function() {$scope. age= 22; }}). directive ("Mydirective",function () {    varobj ={restrict:"AE", Scope:false, replace:true, Template:"<div class= ' my-directive ' >" + "    }    returnobj;});

HTML code:

<div ng-app= "MyApp" >    <div class= "container" ng-controller= "Mycontroller" >        <div class= " My-info "> My name is: <span ng-bind=" name "></span>            <br/> my age is: <span ng-bind=" Ages "></ span>        </div>        <div class= "my-directive" my-directive></div>    </div></div >

CSS code:

div{    padding:6px;} Div.container {    border:1px solid black;} div.my-Info {    border:1px solid blue;} div.my-directive{    border:1px solid Green;}

Because we set the property of scope to false, the instruction we create inherits all the properties and methods of the parent scope, which also makes it possible to use these properties and methods in the template of the directive.
- Note -: At this point we change the name in the input box, we will find that the above two names have changed.

Scope = True

When the scope property is set to True, this indicates that the instruction we create is to create a new scope that inherits the parent scope when the scope is initialized. Modifying the value in the new scope only changes the data under that scope.
Modify the above JS code, the instructions in the: Scope:false modified to scope:true trial effect

Scope = {}

When we set scope to {}, it means that we have created 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.
Modify the above JS code and HTML code JS code:

Angular.module ("MyApp", []). Controller ("Mycontroller",function($scope) {$scope. Name= "Dreamapple"; $scope. Age= 20; $scope. Changeage=function() {$scope. age= 0; }}). directive ("Mydirective",function () {    varobj ={restrict:"AE", scope: {name:' @myName ', Age:=, Changeage:' &changemyage '}, replace:true, Template:"<div class= ' my-directive ' >" + "    }    returnobj;});

HTML code:

<div ng-app= "MyApp" >    <div class= "container" ng-controller= "Mycontroller" >        <div class= " My-info "> My name is: <span ng-bind=" name "></span>            <br/> my age is: <span ng-bind=" Ages "></ span>            <br/>        </div>        <div class= "my-directive" my-directive         my-name= "{{ Name}} "age=" Age "  change-my-age=" Changeage () "></div>    </div></div>

We use an isolated scope, which does not mean that we cannot use the properties and methods of the parent scope.
We can bind the data by passing in a special prefix identifier (that is, prefix) to the scope's {}.
Within the isolation scope, we can refer to the attributes of the elements of the application directive through @,& and =, as in the preceding code, where we can use the <div class="my-directive" my-directive my-name="{{name}}" age="age" change-my-age="changeAge()"></div> prefix identifier to reference the values of these properties by using the attribute my-name,age,change-my-age.
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> Note 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 {{}}.

=

This is a bidirectional data binding prefix identifier
How to use: Use attributes in elements, like this <div my-directive age="age"></div> note that the bidirectional binding of data is implemented by the = prefix identifier, so you cannot use {{}}.

&

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> Note that the name of the property is used-to connect more than one word.
- 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 ',     ' = ',    ' &changemyage ' }

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

@ When the instruction is compiled to the name of the template, it will look in the scope for a key-value pair with name, and if so, as above, see @ To know it is a one-way data binding, Then look for the original command element (or the instruction element itself) containing the value of the property is My-name={{name}}, and then find the value of {{name}} in the parent scope, and then pass to the name in the template.
= and & are similar to @, except that there is a bidirectional data binding, and that changing the value of a property on a template or parent scope causes the other value to change, and & is a binding function.

Scope (scope) of the AngularJS directive