On the scope attribute of ANGULARJS instruction _angularjs

Angularjs uses the directive () method class to define an instruction:

. directive ("name", function () {
  return{
    
  };
})

Above is the body frame that defines a directive, which accepts two parameters:

1, first parameter: Name of the directive defined by ANGULARJS (this name will be registered with this command)

2, the second parameter: function, the sweet potato must return an object or a function, but usually we will return an object. Return is followed by the returned object.

There is a scope property in the returned object that is used to decorate the scope of the instruction.

Every time you register an instruction, this instruction takes into account a question, do we use my own scope, or do I create a child scope that inherits from the parent scope,

or create an isolated scope (not dependent on external scopes);

The value of the scope property is false,true,{} corresponding to the previous scope, child scope, and isolation scope.

Let's take three examples to give us a thorough understanding of the use of these attributes.

1, Scope:false

HTML code:

<div ng-controller= "Mycontroller" >
  <div>
    <span> My name is </span><span ng-bind= " Name "></span><br/>
    <span> my age is </span><span ng-bind=" ages "></span>
    <div my-directive></div>
  </div>
</div>
<script>
  Angular.module ("App", [])
    . Controller ("Mycontroller", function ($scope) {
      $scope. Name = "Kobe";
      $scope. Age = N
    .})
    . Directive ("Mydirective", function () {
      return{
        scope:false,
        Restrict: "A",
        Template: "<div > 
 

Effect:

At this point, the scope of the instruction is the same as the scope of the Mycontroller, so when we enter a new name in the input box, the names on both the top and bottom are changed, as shown in the following figure:

2, Scope:true

Just enter the effect of the page, when we enter a new name in the input box, it will occur and the first experiment is not the same effect, as shown in the picture:

Here, the name of the previous section has not changed, and the following name has changed.

In this experiment, there are two points that need our attention:

1, just enter or refresh the page, the top and bottom names are the same because:when scope is true, the child scopes inherit the properties and methods of the parent action. Therefore, although no name and age are defined in the child scope,

However, it can inherit from the Mycontroller of the parent scope. Therefore, the same name and age are displayed up and down.

2. After entering the new name, the following becomes the reason: we modify name and age on the child scope, so the name below will change, the name above belongs to the parent scope, and the parent scope cannot access the child scope.

So the value of the name above will not change.

3, scope:{}

The scope of the directive is modified as follows:

scope:{
  Name: "@", Age
  : "@"
},

At this point, the effect of loading the page becomes:

We find that the following name and age do not have a value, and because the current scope is isolated, it does not know the properties and methods of the parent scope. We can assign a value to it after the instruction, as follows:

<div my-directive name= "AAA" age= "></div>"

The page's download membership becomes:

When we enter a new name, the effect is as follows

For the same reason, this scope is completely isolated, so the modification is valid only for the properties and methods of the scope of the instruction itself, and is not related to any other scope, and the name of the Mycontroller scope does not change.

The above is a small series for everyone to talk about the scope of the ANGULARJS directive description of the entire content, I hope that we support cloud Habitat Community ~