A brief discussion on the scope attributes of AngularJs directive

AngularJSUse the directive() method class to define a directive:

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

The above is the body framework that defines an instruction, which accepts two parameters:

1. The first parameter: name represents the name of the defined directive (angularjs will use this name to register this directive)

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

There is a scope property in the returned object, which is used to modify the scope of the directive.

Every time we register a directive, this directive will consider a problem. Should we use my own scope or create a child scope inherited from the parent scope?

Or create an isolated scope (not relying on external scope);

The values ​​of scope attributes are false, true, { }, which correspond to the scope, subscope, and isolation scope above.

Let us give three examples to let us thoroughly understand the usage 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="age"></span>
    <div my-directive></div>
  </div>
</div>
<script>
  ("app",[])
    .controller("myController",function($scope){
      $ = "kobe";
      $ = 39;
    })
    .directive("myDirective",function(){
      return{
        scope:false,
        restrict:"A",
        template:"The following part is generated when we create the directive</h1>"+
            "My name is:&lt;span ng-bind='name'&gt;&lt;/span&gt;&lt;br/&gt;"+
            "My age is:&lt;span ng-bind='age'&gt;&lt;/span&gt;&lt;br/&gt;"+
            "Enter your new name:&lt;input type='text' ng-model='name'&gt;"+
            "&lt;/div&gt;"
      };
    })
&lt;/script&gt;

Effect:

At this time, the scope of the instruction is the same as that of myController. Therefore, when we enter a new name in the input box, the names in the upper and lower places will change as shown in the figure below:

2、scope：true

At this time, the effect of the page just entered. When we enter a new name in the input box, the effect different from the first experiment will occur, as shown in the figure:

Here, the names in the upper part have not changed, while the names in the lower part have changed.

There are two points in this experiment that need to be paid attention to:

1. After entering or refreshing the page, the names on the upper and lower parts are the same because:When scope is true, the child scope inherits the properties and methods of the parent role. Therefore, although name and age are not defined in the subscope,

But it can be inherited from the parent scope myController. Therefore, the same name and age are displayed up and down.

2. After entering a new name, the reason why the upper one remains unchanged and the lower one becomes:What we modified is the name and age on the child scope, so the name below will be changed. The name above belongs to the parent scope, and the parent scope cannot access the child scope.

Therefore, the value of the above name will not change.

3、scope：{ }

The scope part of the directive is modified as follows:

scope:{
  name:"@",
  age:"@"
},

At this time, the effect of loading the page will become:

We will find that the name and age below have no values. At this time, because the scope is now isolated, it does not know the properties and methods of the parent scope. We can assign values ​​to the instruction after it, as follows:

<div my-directive name="aaa" age="33"></div>

The loading of the page will become:

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

For the same reason, this scope is completely isolated, so modification is only effective for the properties and methods of the scope of the directive itself, and has nothing to do with any other scope. The name of the scope of myController will not change.

The above is the detailed explanation of the scope attribute of the AngularJs instruction brought to you. I hope everyone can support me~