详解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的一些总结
Nov 03 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
理解javascript中DOM事件
Dec 25 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 Javascript
js+canvas实现画板功能
Sep 13 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 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
PHP 危险函数全解析
2009/09/09 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
2015/10/22 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
Python从MP3文件获取id3的方法
2015/06/15 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
Python批量更改文件名的实现方法
2017/10/29 Python
Django的models中on_delete参数详解
2019/07/16 Python
Python 防止死锁的方法
2020/07/29 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
经典优秀个人求职信分享
2013/12/12 职场文书
二年级数学教学反思
2014/01/21 职场文书
2014自荐信的写作技巧
2014/01/28 职场文书
个人整改方案范文
2014/10/25 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
Python各协议下socket黏包问题原理
2022/04/12 Python