详解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.Validate验证库知识点的详解
Apr 26 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 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新手上路(四)
2006/10/09 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
高中升旗仪式演讲稿
2014/09/09 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
天坛导游词
2015/02/02 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL