今天,我来谈谈angularJs指令的3种绑定策略。
公司最近大量使用angularJs做单页面应用,就免不了使用angularJs的一些组件,而有的组件网上有现成的,不必操心,而有的就得自食其力,先前对指令这一块的封装一直理解的不够,故每次使用directive时抽象性都做得不好,往往移植性很差,而要将抽象做好,就不得不使用指令中的隔离作用域,而光有隔离作用域又不能做好前后文的通信问题,要解决通信的问题,就要使用指令中的绑定,正好最近要用,顺便就整理了一些关于指令中的3种绑定策略,并谈了一些自己的理解。
angularJs中指令scope隔离域绑定有3种策略:如
rush:js;">
.directive("abc",function(){
return {
s
cope:{
title:"@",name:"=",changeNum:"&"
}
/* 出现了s
cope就表示这个指令的s
cope是独立的,但如果要与外界联系,就要使用绑定策略*/
/*使用@符号可将本地作用域的变量与DOM
属性的值进行绑定,即我们通过@得到title
属性的值*/
/*使用=符号可将本地作用域上的
属性与父级作用域上的
属性进行双向绑定,即我们通过=得到name的引用。可以同值传递和引用传递的理解相结合*/
/*使用&符号可以对父级作用域进行绑定,以便在其中运行
函数,简单说就是绑定
函数用的*/
}
})
举一个详细的例子:
HTML:
rush:xhtml;">
AngularJs指令的三种绑定策略
rush:js;">
directive:
myApp.directive("example",s
cope:{
sendMessage:"&",attrs){
}
}
})
//父级作用域的控制器
controller:
myApp.controller("test",function($scope){
$scope.parentSendMessage = function(content){
alert(content);
}
})