详解angularJs指令的3种绑定策略


Posted in Javascript onApril 13, 2017

今天,我来谈谈angularJs指令的3种绑定策略。

公司最近大量使用angularJs做单页面应用,就免不了使用angularJs的一些组件,而有的组件网上有现成的,不必操心,而有的就得自食其力,先前对指令这一块的封装一直理解的不够,故每次使用directive时抽象性都做得不好,往往移植性很差,而要将抽象做好,就不得不使用指令中的隔离作用域,而光有隔离作用域又不能做好前后文的通信问题,要解决通信的问题,就要使用指令中的绑定,正好最近要用,顺便就整理了一些关于指令中的3种绑定策略,并谈了一些自己的理解。

angularJs中指令scope隔离域绑定有3种策略:如

.directive("abc",function(){
   return {
     scope:{          
        title:"@",      
        name:"=",      
        changeNum:"&"    
     } 
/* 出现了scope就表示这个指令的scope是独立的,但如果要与外界联系,就要使用绑定策略*/
/*使用@符号可将本地作用域的变量与DOM属性的值进行绑定,即我们通过@得到title属性的值*/
/*使用=符号可将本地作用域上的属性与父级作用域上的属性进行双向绑定,即我们通过=得到name的引用。可以同值传递和引用传递的理解相结合*/
/*使用&符号可以对父级作用域进行绑定,以便在其中运行函数,简单说就是绑定函数用的*/
   }
})

举一个详细的例子:

HTML:

<div ng-controller="test">
<div>AngularJs指令的三种绑定策略</div>
<example title="titleExample" name="nameExample" send-message="parentSendMessage('example')">
</example>
</div>

说明:example是自定义的指令,用以展示指令的三种绑定策略。

使用@来绑定title,以获取DOM中的属性值。

directive:
   myApp.directive("example",function(){
    return {
      restrict:"E",
      scope:{
        title:"@", 
      },
      link:function($scope,element,attrs){
        console.log($scope.title); ==> titleExample
      }
    } 
   })

说明:@绑定策略,可以将title值与父级作用域的值绑定,比如父级作用域有一个属性是testTitle,我们想将指令中的title属性的值与父级作用域中testTitle的值绑定,故我们可以在HTML将指令改写成<example title={{testTitle}}></example>,这样我们就可以在.directive中通过子作用域中的$scope.title获取到父级作用域$scope.testTitle的值。

使用=来绑定name,以将子作用域与父作用域的属性进行双向绑定。

directive:
   myApp.directive("example",function(){
    return {
      restrict:"E",
      scope:{
        name:"=",
      },
      link:function($scope,element,attrs){
        console.log($scope.name); ==> nameTest
      }
    }
   })
     
  //父级作用域的控制器
   controller:
   myApp.controller("test",function($scope){
     $scope.nameExample = "nameTest"
   })

说明:在实际生产中,这一绑定策略十分有效,譬如说,假定我在指令中要返回一个对象给父级作用域,这时通过“@"这一"值传递"方法已经不能满足需求了,此时就应该考虑"="这一"引用传递",因为通过name="nameExample"这一声明,就将子作用域的$scope.name与父作用域的$scope.nameExample绑定在一起,可以认为他们指向同一地址,不论修改哪个都会影响对方。

使用&来绑定sendMessage ,以将子作用域与父作用域的方法进行绑定。

directive:
   myApp.directive("example",function(){
    return {
      restrict:"E",
      scope:{
        sendMessage:"&",
      },
      link:function($scope,element,attrs){
      }
    }
   })

  //父级作用域的控制器
   controller:
   myApp.controller("test",function($scope){
     $scope.parentSendMessage = function(content){
        alert(content);
     }
   })

说明:可以看到"&"绑定就是让子作用域可以使用父级作用域中的方法,这样就可以利用父级作用域$scope.parentSendMessage ()中的一些数据进行运算,并将结果返回给子作用域$scope.sendMessage() 。

希望这篇浅见能对你了解指令隔离域的3种绑定策略有些许帮助!也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现的网页局布刷新效果
Dec 01 Javascript
js列举css中所有图标的实现代码
Jul 04 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
Node.js简单入门前传
Aug 21 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 #Javascript
Vue组件tree实现树形菜单
Apr 13 #Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 #Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 #Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 #Javascript
JS传参及动态修改页面布局
Apr 13 #Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 #Javascript
You might like
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
YII框架http缓存操作示例
2019/04/29 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
Python中os和shutil模块实用方法集锦
2014/05/13 Python
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
美国零售商店:Blue&Cream
2017/04/07 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
汉语言文学职业规划
2014/02/14 职场文书
诚实守信演讲稿
2014/09/01 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
先进事迹材料范文
2014/12/29 职场文书
领导工作表现评语
2015/01/04 职场文书
2015年老干部工作总结
2015/04/23 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
python异常中else的实例用法
2021/06/15 Python