详解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 相关文章推荐
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
ios中视频的最后一桢问题解决
May 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中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
Js apply方法详解
2017/02/16 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
基于python实现微信模板消息
2015/12/21 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
python paramiko模块学习分享
2017/08/23 Python
python中学习K-Means和图片压缩
2017/11/20 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
小学生获奖感言范文
2014/02/02 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
竞争上岗实施方案
2014/03/21 职场文书
团日活动总结模板
2014/06/25 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
经销商会议开幕词
2016/03/04 职场文书
如何撰写促销方案?
2019/07/05 职场文书
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers