Parse three data binding policies in angularjs

Parse three data binding policies in angularjs

 

Import: We want to achieve this effect: When we click the title, the following content is displayed, and then click it to retrieve it.

 

I. First, let's review the binding policies?

This is a bit abstract. Let's look at the specific instance analysis!
 

Ii. Simple Demo instance

@ Bind: Pass a string as the attribute value. For example, str: '@ string'

 

Sample Code in the controller:

MyDirec. controller ('myctrl3 ', [' $ scope ', function ($ scope) {$ scope. ctrlFlavor = cocktail; $ scope. sayHello = function (name) {alert (Hello + name) ;}}]); myDirec. directive (drink, function () {return {restrict: 'AE', scope: {flavor: '@' // automatically bound, passed string}, template:

{{ Flavor }},};});
Examples of using tags on the page:

 

 

Analyze why we can obtain the value in the parent scope in the drink command? The reason is that we use the @ binding policy and can assign ctrlFlavor to flavor so that this value can be obtained in the template.

 

 

= Bind: Specifies that the property to be retrieved is of the parent scope.

MyDirec. directive (drink2, function () {return {restrict: 'AE', scope: {flavor: '=' // automatically bound}, template :''};});

 

Page:

 

The execution process is as follows:

① When the command is compiled, it will scan the model in the template and find a flavor,

② Check whether the scope is defined: bind with the parent scope through = by passing the attribute ctrlFlavor in the parent scope;

③ Flavor is bound to the ctrlFlavor attribute in the parent scope, and its value is "Cocktail ";

④ Display the model value in the template.

 

& Binding: the function in the parent scope is passed.

Controller part:

 

MyDirec. directive (greeting, function () {return {restrict: 'AE', scope: {greet: '&'}, template :''+'Greetings'};});

 

Page:

 

From the result, the content in the three input boxes does not affect each other, because they are all new independent scopes and can be bound from the view to the model.

 

 

Iii. Expander example

First, check the Controller code:

 

/* Expander example */myDirec. controller ('somecontroller', function ($ scope) {$ scope. title = 'click to expand '; $ scope. text = 'here is the content displayed internally ';}); myDirec. directive ('pander', function () {return {restrict: 'ea ', replace: true, transclude: true, scope: {title:' = expanderTitle '}, template :'

'+' {Title} '+ '', link: function (scope, element, attrs) {scope. showMe = false; scope. toggle = function () {scope. showMe =! Scope. showMe ;};}};});
Look at the page:

 

 

{Text }}
The execution process is as follows:

 

① When the instruction is compiled, A {title} model in the template is scanned and found }},

② Check whether the scope is defined: bind with the parent scope through = by passing the attributes in the parent scope;

I am always confused here. I want to explain this "method is to pass attributes in the parent scope". Where is this used?

 

{Text }} No. The attribute expander-title = 'title' in the instruction. Isn't that the attribute in the parent scope passed?

 

③ The expander-title is bound to the title attribute in the parent scope. Find its value "click to expand ";

④ Display the title value in the template.

 

Note:: The attribute title in the independent scope of the instruction is used for the following template. The value of the title should be based on the attributes in the parent scope of the specific parent scope of the person who uses the instruction on the page, the property binding operation is completed.

In short, we can use angularjs's Data Binding policy to transfer values from the parent scope to the instruction. This is very useful!