详解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 相关文章推荐
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
用vue设计一个日历表
Dec 03 Vue.js
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
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
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
php expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
JScript的条件编译
2007/05/29 Javascript
Firefox window.close()的使用注意事项
2009/04/11 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
Python3处理HTTP请求的实例
2018/05/10 Python
详解Python 最短匹配模式
2020/07/29 Python
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
介绍一下write命令
2014/08/10 面试题
设置器与访问器的定义以及各自特点
2016/01/08 面试题
饲料采购员岗位职责
2013/12/19 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
计划生育宣传标语
2014/06/21 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
装修施工安全责任书
2014/07/24 职场文书
运动会开幕词
2015/01/28 职场文书
行政处罚决定书
2015/06/24 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript