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

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

二、简单的Demo实例

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

控制器中代码部分示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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}}
, }; });
页面中使用标签部分示例：

1
 

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

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

1
2
3
4
5
6
7
8
9
myDirec.directive(drink2,function(){
    return{
        restrict:'AE',
        scope:{
            flavor:'='  //自动绑定
        },
        template:'<input ng-model="flavor/" type="text">'
    };
});

页面：

1
 

执行的流程是这样的：

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

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

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

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

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

控制器部分：

1
2
3
4
5
6
7
8
9
10
11
12
myDirec.directive(greeting, function() {
    return {
        restrict:'AE',
        scope:{
            greet:'&'
        },
        template:'<input ng-model="userName" type="text">
'+
                 '<button ng-click="greet({name:userName})">问候一下</button>
'
    };
});

页面部分：

1
 

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

三、Expander示例

首先看控制器代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*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() { scope.showMe = !scope.showMe; }; } }; });
再看页面部分：

1
 

{{text}}

执行的流程是这样的：

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

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

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

1
 

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

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

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

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

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

来自：http://www.2cto.com/kf/201504/391807.html    解析angularjs中的三种数据绑定策略

最新文章

  1. Protocol Buffer详解
  2. 如何判断list中是否包含某个元素
  3. java:找出占用CPU资源最多的那个线程(HOW TO)
  4. 【python学习笔记02】python的数据类型2
  5. java实现 阿拉伯数字转换为汉字数字 算法
  6. ASP.NET4.5Web API及非同步程序开发系列
  7. arm 异常处理结构
  8. VxWorks 任务
  9. actionbar详解（二）
  10. js正则表达式替换HTML标签以及空格(&amp;nbsp;)
  11. Activiti（一） activiti数据库表说明
  12. unity中加载场景不销毁以及切换场景重复实例化
  13. Tikhonov regularization 吉洪诺夫 正则化
  14. kmeans
  15. Lombok快速入门
  16. 数据结构与STL容器
  17. 【BZOJ4259】残缺的字符串
  18. 使用socat查看ios日志
  19. 胖子哥的大数据之路（10）- 基于Hive构建数据仓库实例
  20. X32位 天堂2 二章/三章 服务端协议号修改方法

热门文章

  1. no git binary found in $path（已解决，但是还有疑问）
  2. POJ - 2891 中国剩余定理
  3. [转] Java 使用Try-with-resources自动关闭资源
  4. centos 7 禅道bug管理软件部署
  5. Docker 命令详解（run篇）
  6. 【3dsMax安装失败，如何卸载、安装3dMax 2012？】
  7. MySql Unknown column 的解决方案
  8. pat1015. Reversible Primes (20)
  9. docker 摘要(入门版)
  10. springboot整合activeMq 跳坑