Analysis of binding strategy instance of scope in AngularJS

This article describes the binding strategy of scope in AngularJS. Share it for your reference, as follows:

When the scope option is written as scope:{ }, an isolated scope has been generated for the directive, and the directive template cannot access the external scope:

The most important use scenario for instructions with isolated scopes is to create reusable components that can be used in unknown contexts and can avoid contaminating the external scope in which they are located or inadvertently contaminating the internal scope.

Now, let's take a lookThree forms of binding strategy: @, =, &。

1. @

Local scope attributes: Use the @ symbol to bind the local scope to the value of the DOM attribute. The internal scope of the directive can use variables with the external scope:

@ (or @attr)

Pass the current attribute as a string. You can also bind the value of scope from the outer layer and insert {{ }} into the property value. What does it mean? To put it simply, suppose you have a double brace expression in the template, and then we bind the contents of the expression to the properties of the specific name in the directive in the html:

<div ng-controller="nameController">
  <direct for-name="{{ Name }}"></direct>
<div>

directive("direct",function(){
    return{
      restrict: 'A',
      template: '<div>Instructions：{{ name }}</div>',
      scope:{
       name:'@forName'
      }
     }
 })
.controller("nameController",function($scope){
   $="Zhang San";
});

2. =

Bidirectional binding with properties in parent scope

@ is used for strings (expression expression to be precise), but = is a reference to an object;

<div ng-controller="nameController">
  <direct case="data[0]"></direct>
  <direct case="data[1]"></direct>
<div>

directive("direct",function(){
    return{
      restrict: 'ECMA',
      template: '<div>Instructions：{{  }}</div>',
      scope:{
       case:'='
      }
     }
 })
.controller("nameController",function($scope){
   $=[{name:"Zhang San"},{name:"Li Si"}];
});

data is an object array that contains two objects, so we pass the two objects to the case property, and the case property passes the reference to the object to the case in the {{}} we wrote in the template; and if you add the name you defined after =, you just need to change the case property in html to that name.

3. &

Pass the function from the parent scope and call it later

Its meaning is: bind the parent scope and wrap the properties in it into a function. Note that any type of attribute will be wrapped into a function, such as a simple string, an object array, or a function method.

For more information about AngularJS, readers who are interested in view the topic of this site:Summary of AngularJS command operation skills》、《AngularJS Introduction and Advanced Tutorial"and"AngularJS MVC architecture summary》

I hope this article will be helpful to everyone's AngularJS programming.