解析angularjs中的三种数据绑定策略

 导入：我们想要实现这样的效果：当我们点击标题的时候展示下面的内容，再点击则收回去。

      

 

一、首先回顾一下有哪些绑定策略？

 看这个实在是有点抽象了，我们来看具体的实例分析吧！

二、简单的Demo实例

   @绑定：传递一个字符串作为属性的值。比如 str : ‘@string’

   控制器中代码部分示例： 

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:"<div>{{flavor}}</div>",    };});

  页面中使用标签部分示例：

 

<div ng-controller="MyCtrl3">       <drink flavor="{{ctrlFlavor}}"></drink>    </div>

  分析我们在drink指令中为什么能取得在父作用域中的值呢？原因就在于我们使用了@绑定策略，可以将ctrlFlavor赋值给flavor,这样在模板中就能取到该值了。

   =绑定：指定获取属性的类型为父作用域的属性

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

 

   页面：

<div ng-controller="MyCtrl3">        <drink2 flavor="ctrlFlavor"></drink2>    </div>

    执行的流程是这样的：

　　① 指令被编译的时候会扫描到template中的模型发现有一个flavor，

　　② 查找scope中是否定义：通过=与父作用域绑定，方式是传递父作用域中的属性ctrlFlavor；

　　③ flavor与父作用域中的ctrlFlavor属性绑定，找到它的值“鸡尾酒”；

　　④ 将model的值显示在模板中。

       &绑定：传递的是父作用域中的函数

     控制器部分：

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

        页面部分：

<div ng-controller="MyCtrl3">            <greeting greet="sayHello(name)"></greeting>            <greeting greet="sayHello(name)"></greeting>            <greeting greet="sayHello(name)"></greeting></div>

     从结果上看，三个输入框中的内容互不影响，因为都是新的独立作用域，能够完成从视图到模型的绑定。

三、Expander示例

           首先看控制器代码：

/*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 : '<div>'                 + '<div class="title" ng-click="toggle()">{{title}}</div>'                 + '<div class="body" ng-show="showMe" ng-transclude></div>'                 + '</div>',        link : function(scope, element, attrs) {            scope.showMe = false;            scope.toggle = function() {                scope.showMe = !scope.showMe;            };        }    };});

       再看页面部分：

<div ng-controller='SomeController'>        <expander class='expander' expander-title='title'> {{text}} </expander> </div>

     执行的流程是这样的：

　　① 指令被编译的时候会扫描到template中的模型发现有一个{{title}}，

　　② 查找scope中是否定义：通过=与父作用域绑定，方式是传递父作用域中的属性;

    我总是在这里犯糊涂，解释下这个“方式是传递父作用域中的属性”，这个在哪里用的呢？

<div ng-controller='SomeController'>        <expander class='expander' expander-title='title'> {{text}} </expander> </div>

    看到没，指令中的属性expander-title='title',这不就是传递父作用域中的属性吗？

　　③ expander-title与父作用域中的title属性绑定，找到它的值“点击展开”；

　　④ 将title的值显示在模板中。

           注意：指令中的独立作用域中的属性title是为了给下面的模板使用 的，而title所对应的值，要依据页面中指令的使用传人具体的父作用域中的属性，完成属性的绑定操作。

           总之、我们可以利用angularjs为我们提供的数据绑定策略来实现从父作用域向指令中传值，这个很有用哦！

          不知道讲清楚了没，欢迎批评指正O(∩_∩)O~