详解Angularjs 如何自定义Img的ng-load 事件
在使用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 }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
AngularJS实现给动态生成的元素绑定事件的方法
本文实例讲述了AngularJS实现给动态生成的元素绑定事件的方法.分享给大家供大家参考,具体如下: 1 . 我们知道在jQuery中,动态生成一个元素,如果要在动态生成元素的同时,动态绑定事件,可以通过live/on方法(在jquery3.0中已经废除了bind方法). 2 . 在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular.module('
-
Angularjs 事件指令详细整理
Angularjs 事件指令详细整理 ngClick 适用标签:所有 触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me</button> </div> #script angular.m
-
AngularJS 中的事件详解
AngularJS 事件 AngularJS 有自己的 HTML 事件指令. ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.
-
Angularjs中使用指令绑定点击事件的方法
项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> <li class=""> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external n
-
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍: $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己.格式如下:$broadcast(eventName,args) $emit的作用是将事件从子级作用域传播至父级作用域,包括自己,直至根作用域.格式如下:$emit(eventName,args) $on用于在作用域中监控从子级或父级作用域中传播的事件以及相应的数据.格式如下:$on(event,dat
-
浅谈angularJS中的事件
什么是事件 •如同浏览器响应浏览器层的事件,比如鼠标点击.获得焦点,angular应用也可以响应angular事件 •angular事件系统并不与浏览器的事件系统相通,我们只能在作用域上监听angular事件而不是DOM事件 事件传播 因为作用域是有层次的,所以我们可以在作用域链上传递事件: •使用$emit冒泡事件,事件从当前子作用域冒泡到赋作用域,在产生事件的作用域之上的所有作用域都会收到这个事件的通知 $emit()方法带有两个参数: name 要发出的事件的名称 args 一个参数
-
Angularjs为ng-click事件传递参数
在angularjs开发中,我们需要为ng-click事件传递一个参数. 在js中,可以接到参数: 演示:
-
angularjs实现下拉列表的选中事件示例
select标签的对于大家来说很熟悉了,下面我来讲讲AngularJS中 对select的属性设置,做出选择某个下拉选项后控制其他标签的隐藏: <select style="height:31px; width:100px" id="rewardMethod"name="rewardMethod" class="status_select" ng-model="state"> <optio
-
AngularJS中directive指令使用之事件绑定与指令交互用法示例
本文实例讲述了AngularJS中directive指令使用之事件绑定与指令交互用法.分享给大家供大家参考,具体如下: AngularJS中模板的使用,事件绑定以及指令与指令之间的交互 <!doctype html> <html ng-app="myapp"> <head> <meta charset="utf-8"/> </head> <body ng-controller="Shield
-
Angularjs 动态添加指令并绑定事件的方法
这两天学习了angularjs 感觉指令这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果: var count=0; $("#test").on("click",function(event){ if(event.target.tagName.toLowerCase()=="input") return; count++; var html="&
随机推荐
- iOS Swift读取本地json文件报错的解决方法
- ASP.NET动态设置页面标题的方法详解
- DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
- asp下生成目录树结构的类
- PHP常用特殊运算符号和函数总结(php新手入门必看)
- php用正则判断是否为数字的方法
- 使用jQuery简化Ajax开发
- 让批处理被wsh解析的代码
- node中koa中间件机制详解
- Django中几种重定向方法
- 详解EasyUi控件中的Datagrid
- js 提交form表单和设置form表单请求路径的实现方法
- Android控件SeekBar仿淘宝滑动验证效果
- SpringMVC Restful api接口实现的代码
- ASP.NET中在不同的子域中共享Session的具体方法
- 详解Asp.Net Core 2.1+的视图缓存(响应缓存)
- vue select选择框数据变化监听方法
- 如何测量vue应用运行时的性能
- Oracle12c图形化&静默安装踩坑的方法步骤
- 微信小程序画布圆形进度条显示效果