Detailed explanation of isolation in AngularJS and binding strategies

We first look at the example below:

                   Let's take a look at the code in IsolateScope:   VAR mymodule = angular.Module ("MyModule", []); MyModule.directive ("Hello", Function () {return {restrict: 'ae', template: '  {{username}} ', replace: true}}; 

At this time, when the page is running, it is found that there is a change in input in INPUT, this time all NPUT content will change:
  This will face A question: Our instructions cannot be used alone, so there is a concept of independent scope. 
VAR MyModule = Angular.Module ("MyModule", []); MyModule.directive ("Hello", Function () {Return {Restrict: 'AE', Scope: {}, template: '
{usernamE}} ‘, replace: true}};

By setting the scope to {}, each instruction has its own independent Scope space, Then it will not affect each other. But the most important concept in AngularJS is: Binding Policy. It has a binding strategy as follows: 详解angularjs中的隔离作用域理解以及绑定策略

Step 1:
We look at the original way, that is, do not use the above three bindings
  

详解angularjs中的隔离作用域理解以及绑定策略

See the content in Scopeat:
   var mymodule = angular.module ("mymodule", []); mymodule.controller ('myctrl', ['$ scope', function ($ scope) {$ scope.ctrlflavor = "百 威" // Set the Ctrlflavor property} in the controller}] // Define the Drink command mymodule.directive ("Drink", function () {Return {Restrict: 'AE', Template: " { {Flavor}}  ", LINK: Function (Scope, Element, Attrs) {Scope.flavor= Attrs.flavor; // When the link is lined in Scope, then display}}} in Template;      At this time The DOM structure is as follows: 
However, this way to obtain the attribute value of this instruction via attrs.flavor, then you need to bind this attribute value on the Scope object, Finally, in Template, you can get the value in Scope in the form of {{}}!
Step 2: We use the above @ to replace the first way Because it requires itself to specify a link function each time:
VAR MyModule = Angular.Module ("MyModule", []); MyModule.Controller ('myctrl', ['$ scope', function ($ scope) {$ scope.ctrlflavor = "Baiwei"; // set the ctrlflavor attribute} in the controller}]) // Define the Drink instruction MYMODULE.DIRECTIVE ("Drink ", function () {return {restrict: 'ae', scope: {flavor: '@'}, template:"
{{flavor}} “}});

This method is to bind the Flavor property value in the DRINK to the Scope object, and this is NG to automatically bind us. However, @ 定 bound is a string, not an object!
  
Step 3:
Let's learn two-way data binding

详解angularjs中的隔离作用域理解以及绑定策略

Ctrl:


  
Let's take a look at the contents of the controller


var mymodule = angular.module (“mymodule”, [ ]); // Specify the controller object mymodule.controller (‘myctrl’, [‘$ scope’, function ($ scope) {$ scope.ctrlflavor = “Baiwan”;}] // specifies the command mymodule. Directive (“Drink”, Function () {Return {RESTRIT: ‘AE’, Scope: {Flavor: ‘=’ // This is specified by ‘=’ to specify the two-way data binding in the Flavor and Scope of the Drink instruction!}, Template: ‘

‘}});

This is the ‘=’ this binding method. It implements two-way data binding strategies. We look at the last DOM structure:

In fact, two-way data binding
 is obvious, it takes goodSolving two-way data binding (two-way data binding between instructions and controllers)    Step 4:  We use & bind policies to complete calls to the Controller parent method:      



three definitions Command Greeting, each directive needs to call a SayHello method in Controller, and how to implement the interaction between the controller and instructions in AngularJS indicate that the controller and instructions can be interacted by defining the properties, but here we You can use simple & complete the same function) and passed into different parameter Name values:

var mymodule = angular.module (“MyModule”, []); / / Specify a Sayhello method for the controller, and you can get a parameter mymodule.controller (‘myctrl’, [‘$ scope’, function) {$ scope.sayhello = function (name) {Alert (“Hello” + Name);}}]) MyModule.directive (“Greeting”, Function () {Return {Restrict: ‘AE’, Scope: {Greet: ‘&’ // Passing a ParentSCOPE functions are used later, get a GREET parameter, get a SayHello (Name) function}, // In Template, we specify a parameter in the NG-Click, which is specified to call the Greet method in the Controller, incoming parameters The Name value is username // is also the parameters specified in Ng-model = ‘username’, Template: ‘
' + ' Greeting  '}}); 

The call to the parent-level action method can be completed by & instead of using a traditional way to accomplish the controller and instructions in a manner!

详解angularjs中的隔离作用域理解以及绑定策略 The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment