详解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 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
详解vue项目构建与实战
Jun 27 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 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
个人写的PHP验证码生成类分享
2014/08/21 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
webpack多页面开发实践
2017/12/18 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
pyqt5之将textBrowser的内容写入txt文档的方法
2019/06/21 Python
pandas取出重复数据的方法
2019/07/04 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
python 连续不等式语法糖实例
2020/04/15 Python
scrapy-splash简单使用详解
2021/02/21 Python
澳洲健康食品网上商店:Aussie Health Products
2018/06/15 全球购物
澳大利亚女装精品店:Alannah Hill
2020/07/29 全球购物
升职自荐信
2013/11/28 职场文书
平面设计求职信
2014/03/10 职场文书
春节联欢会策划方案
2014/05/16 职场文书
高中教师考核方案
2014/05/18 职场文书
小学老师对学生的评语
2014/12/29 职场文书
2015大一新生军训感言
2015/08/01 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书
Python绘制分类图的方法
2021/04/20 Python