A trick to make enemies-play the AngularJS Directive scope (scope) "Go"

Learning the Angularjs for a long time, and recently looking back at this part of the instruction, I feel more in depth than when I first started to learn, especially the scope of the instruction.

Originally read the "Angularjs authoritative guide" this book, but feel this book about this aspect is not very detailed,
In addition to spit, this book Chinese version of the quality of the printing is not very good, a lot of places are wrong, but the talk is still possible, is a good book to learn Angularjs.

Let's take a look at the scope of the instruction in detail.
Before this, I hope you have a certain understanding of Angularjs's directive, otherwise your understanding of the following section may be a bit difficult.

Step into the chase:

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

First, let's scope take a look at what happens when the parameter is set to false

In this case, the variables in the parent scope can be used directly in the instruction template, and the function
Let's start by creating a directive with the code as follows:
JS Code:

Angular.module ("MyApp", []). Controller ("Mycontroller",function($scope) {J1 Here we initialize two variables $scope in the scope. Name ="Dreamapple"; $scope. Age =20;J2 Create a method that modifies the age $scope of the objects we create. Changeage =function() {$scope. Age =22; }})J3 created our directive with the name "mydirective". Directive ( "mydirective", function  () {var obj = {//J4 directive is "AE" attribute and element Restrict:  "AE", //j5 instruction inherit the properties and methods of the parent scope scope: false, replace: true, Template: " <div class= " My-directive ' > +   "My name is: <span ng-bind= ' name ' ></span><br/>" +  "My age is: <span ng-bind= ' Age ' ></span> ' +  "<input type= ' text ' ng-model= ' name ' >" + " </div> "} return obj;});        

HTML code:

<Divng-app="MYAPP" ><Divclass="Container"Ng-controller="Mycontroller" ><Divclass="My-info" > My name is:<SpanNg-bind="Name" ></span> <!--use "ng-bind" to prevent an unassigned expression when network status is poor--<br/> my age is: < span ng-bind= "age" ></span> </div> <!--use attribute declaration directives--<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;               /span>             

Online Code Part1 Click to preview

Let's explain the above code in more detail:

Because we scope set the property to false so, the instruction we create inherits all the properties and methods of the parent scope, which also makes it possible for us 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, you will certainly say, this must be so ah, data binding, OK, we go down.

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.
Wait, did we just say that when we scope set the property value to the false same time, it does not inherit our parent scope? The table was anxious, and we went on looking down.

Modify the above JS code, will be in the command:

scope:falseRevision changed toscope: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.
   Online Code Part2 Click to preview

scope = {}

Below we are going to go into a fun part, 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.

Of course, first of all we have to give our example, first look at the code, we modified 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 () {var obj = {restrict:  "AE", Scope: {Name:  ' @myName ', Age:  ' = ', Changeage:  ' &changemyage '}, replace: true, Template: " <div class= ' my-directive ' > "+ " " My name is: <span ng-bind= ' name ' ></span><br/> ' +  "My age is: <span ng-bind= ' ages ' ></span><br/>" +  "Change name here: <input type= ' text ' ng-model= ' name ' ><br/>" +  "<button ng-click= ' Changeage () ' > Modify Age </button> ' +  ' </div> '}  return obj;});               

HTML code:

<Divng-app="MYAPP" ><Divclass="Container"Ng-controller="Mycontroller" ><Divclass="My-info" > My name is:<SpanNg-bind="Name" ></Span><Br/> my age is:<SpanNg-bind= "age" ></span> <br/> </ div> <div class= "my-directive"  My-directive my-name= "{{name}}" age= "age" change-my-age=< Span class= "Hljs-value" > "Changeage ()" ></div> </div></div>  

Online Code Part3 Click to preview

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` 就是原来元素中的`my-name`属性            name: ‘@myName‘,             age: ‘=‘,            // `changeMyAge`就是原来元素中的`change-my-age`属性            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.

Transferred from: http://segmentfault.com/a/1190000002773689

A trick to make enemies-play the AngularJS Directive scope (scope) "Go"