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

所属分类: 网络编程 / JavaScript 阅读数: 1480
收藏 0 赞 0 分享

今天,我来谈谈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种绑定策略有些许帮助!也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return,需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现(同步与异步)

这篇文章主要介绍了JS分页的实现(同步与异步),需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0 赞 0 分享
查看更多