Parsing the binding policy in Angularjs

first, What are the binding strategies to look at?

Look at this is a bit abstract, we look at concrete examples of the analysis it!

second, a simple Demo instance

@ Binding : Passes a string as the value of the Property. such as Str: ' @string '

Examples of code sections in the Controller:

?

12345678910111213141516

myDirec.controller(‘MyCtrl3‘,[‘$scope‘,function($scope){   $scope.ctrlFlavor=鸡尾酒;      $scope.sayHello=function(name){       alert(Hello +name);   };   }]);myDirec.directive(drink,function(){    return{          restrict:‘AE‘,          scope:{                flavor:‘@‘//自动绑定，传递的是字符串          },          template:

{{flavor}},}; });
Examples of using the label section of the Page:

?

1

Analyze why we can get the values in the parent scope in the drink directive? The reason is that we used the @ binding policy, and we can assign the Ctrlflavor to flavor so that the value can be taken in the Template.

= Binding : Specifies the property that gets the type of the property as the parent scope

?

123456789

myDirec.directive(drink2,function(){    return{        restrict:‘AE‘,        scope:{            flavor:‘=‘//自动绑定        },        template:‘<input ng-model="flavor/" type="text">‘    };});

Page:

?

1

The process of execution is this:

When the ① instruction is compiled, the model that is scanned into the template discovers a flavor,

② find out whether the scope is defined by = is bound to the parent scope by passing the property Ctrlflavor in the parent scope;

③flavor binds to the Ctrlflavor attribute in the parent scope and finds its value "cocktail";

④ displays the value of the model in the Template.

& Binding: Passing a function in the parent scope

Controller section:

?

123456789101112

myDirec.directive(greeting, function() {    return {        restrict:‘AE‘,        scope:{            greet:‘&‘        },        template:‘<input ng-model="userName" type="text">‘+                 ‘<button ng-click="greet({name:userName})">问候一下</button>‘    };});

Page section:

?

1

As a result, the contents of the three input boxes do not affect each other, because they are new independent scopes that can be bound from view to Model.

Iii. Examples of Expander

First look at the controller code:

?

123456789101112131415

/*Expander示例*/myDirec.controller(‘SomeController‘,function($scope) {    $scope.title = ‘点击展开‘;    $scope.text = ‘这里是内部的显示的内容‘;});myDirec.directive(‘expander‘, function() {    return {        restrict : ‘EA‘,        replace : true,        transclude : true,        scope : {            title : ‘=expanderTitle‘        },        template : ‘

' + ' {{title} ' + ' + ', link:function (scope, element, attrs) {scope.showme = false; Scope.toggle = function () {sco Pe.showme =!scope.showme; }; } }; });
Look at the page section again:

?

1

{{text}}
The process of execution is this:

When the ① instruction is compiled, the model that is scanned into the template is found to have a {{title}},

② find out whether the scope is defined by = is bound to the parent scope by passing the property in the parent scope;

I am always confused here, explaining that this "way is to pass the properties of the parent scope", where is this used?

?

1

{{text}} See no, The attribute in the directive expander-title= ' title ', is this the passing of a property in the parent scope?

③expander-title is bound to the Title property in the parent scope and finds its value "click to expand";

④ Displays the value of title in the Template.

Note : The attribute title in the independent scope in the directive is used for the following template, and the value of title corresponds to the property in the specified parent scope, based on the use of the instruction in the page, to complete the binding operation of the Property.

In short, we can use ANGULARJS to provide us with a data binding policy to implement the value from the parent scope to the instruction, this is very useful oh!

from: http://www.2cto.com/kf/201504/391807.html Analysis of three data binding strategies in Angularjs

Parsing the binding policy in Angularjs