详解Angularjs 如何自定义Img的ng-load 事件


Posted in Javascript onFebruary 15, 2017

在使用AngularJs的过程中,我们常常会用到一些ng-事件,如ng-click、ng-change等,这些事件都是AngularJs事先为我们定义好的。也有的情况下,我们会用到一些使用频率不高的dom事件,如img的onload(图片加载完成后触发),但AngularJs中默认没有这个事件,那么我们该如何自定义添加ng-load这个事件呢?

只需要给app对象添加如下指令即可:

myApp.directive('imageonload', function () {
  return {
    restrict: 'A', link: function (scope, element, attrs) {
      element.bind('load', function () { 
        //call the function that was passed 
        scope.$apply(attrs.imageonload);
      });
    }
  };
})

在Html中直接使用imageonload属性追加事件:

<img ng-src="{{src}}" imageonload="doThis()" />

最后,在controller中写对应的事件内容即可:

$scope.doThis=function(){
 //your own code
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascipt基础内容--需要注意的细节
Apr 10 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
js 自动播放的实例代码
Nov 19 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
jquery实现checkbox 全选/全不选的通用写法
Feb 22 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 #Javascript
JS 实现随机验证码功能
Feb 15 #Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 #Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 #Javascript
javascript中apply/call和bind的使用
Feb 15 #Javascript
JS实现图片放大缩小的方法
Feb 15 #Javascript
JavaScript中的编码和解码函数
Feb 15 #Javascript
You might like
一个取得文件扩展名的函数
2006/10/09 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
python多线程操作实例
2014/11/21 Python
介绍Python中内置的itertools模块
2015/04/29 Python
Python 序列的方法总结
2016/10/18 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
军训自我鉴定
2014/01/22 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书