angularjs自定义指令

最新推荐文章于 2023-06-29 07:00:00 发布

dashanzi5386

最新推荐文章于 2023-06-29 07:00:00 发布

阅读量76

点赞数

原文链接：http://www.cnblogs.com/lmy2016/p/6074017.html

版权

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种绑定策略
“@”与父级作用域进行单项绑定
“=”与父级作用域进行双向绑定
“&”将子作用域与父作用域的方法进行绑定，子作用域可以使用父作用域的方法

转载于:https://www.cnblogs.com/lmy2016/p/6074017.html