angularjs自定义指令

时间:2023-03-09 09:34:25
angularjs自定义指令
my-directive为指令名称,thisdata为绑定的数据

 <span ng-repeat="act in move.casts" style="position:relative">
<my-directive thisdata="act">
</my-directive>
<img src="" alt="" class="pic" >
</span>

app.directive('myDirective',function(){
return {
restrict:'EA',
template:'<span>{{thisdata.name}}</span>', //thisdata表示act
scope:{
thisdata:"=" //"="表示双向绑定数据
},
replace:false,
link:function (scope,element,attr) { //scope一个自定义的子作用域,element表示当前控制的元素
element.mouseenter(function () {
this.nextSibling.nextSibling.src=scope.thisdata.avatars.small;
});
element.mouseleave(function(){
this.nextSibling.nextSibling.src="";
});
} }
}); //自定义指令的3种绑定策略
“@”与父级作用域进行单项绑定
“=”与父级作用域进行双向绑定
“&”将子作用域与父作用域的方法进行绑定,子作用域可以使用父作用域的方法