欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

angularJs中的 $event

程序员文章站 2022-07-02 18:51:36
...

最近在项目开发过程中,发现$event的作用十分强大。

在angularJs中,this指向$scope

但是可以$event配合使用$(event.target)实现

原来无效的代码:

$scope.addActive = function () {
            $(this).addClass("active").parent("li").siblings("li").children("a").removeClass("active")
    }

修改之后:

<li><a href="javascript:;" class="active" ng-click="addActive($event)">全部</a></li>
$scope.addActive = function (ev) {
            $(ev.target).addClass("active").parent("li").siblings("li").children("a").removeClass("active")
    }

也就是说,要模拟jq的this指向,使用$event.target即可。

应用:

点击之后放大图片,这里的作用是获取被点击的图片路径:

使用的时候传入$event即可

ng-click="showBigImg($event)
$scope.showBigImg=function (ev) {
        // layer.alert(ev.target.src)
        layer.open({
            skin: 'top-200',
            title:'',
            area:['760px','500px'],
            id:"bigImg",
            content:'<img src='+ev.target.src+' alt="大图">'
        })
    }
ev.target.src即为图片路径。