详解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 相关文章推荐
jquery $.fn $.fx是什么意思有什么用
Nov 04 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 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
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
Python内置函数delattr的具体用法
2017/11/23 Python
关于Python的一些学习总结
2018/05/25 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
python对常见数据类型的遍历解析
2019/08/27 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
学生自我鉴定
2013/12/18 职场文书
大学生村官心得体会范文
2014/01/04 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL