詳解Angularjs 如何自定義Img的ng-load 事件
在使用AngularJs的過程中,我們常常會(huì)用到一些ng-事件,如ng-click、ng-change等,這些事件都是AngularJs事先為我們定義好的。也有的情況下,我們會(huì)用到一些使用頻率不高的dom事件,如img的onload(圖片加載完成后觸發(fā)),但AngularJs中默認(rèn)沒有這個(gè)事件,那么我們該如何自定義添加ng-load這個(gè)事件呢?
只需要給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中寫對應(yīng)的事件內(nèi)容即可:
$scope.doThis=function(){ //your own code }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Angularjs為ng-click事件傳遞參數(shù)
- Angularjs 動(dòng)態(tài)添加指令并綁定事件的方法
- Angularjs中使用指令綁定點(diǎn)擊事件的方法
- angularjs實(shí)現(xiàn)下拉列表的選中事件示例
- AngularJS實(shí)現(xiàn)給動(dòng)態(tài)生成的元素綁定事件的方法
- AngularJS中directive指令使用之事件綁定與指令交互用法示例
- AngularJS 中的事件詳解
- 淺談angularJS中的事件
- Angularjs中的事件廣播 —全面解析$broadcast,$emit,$on
- Angularjs 事件指令詳細(xì)整理
相關(guān)文章
詳解創(chuàng)建自定義的Angular Schematics
本文對 Angular Schematics 進(jìn)行了介紹,并創(chuàng)建了一個(gè)用于創(chuàng)建自定義 Component 的 Schematics ,然后在 Angular 項(xiàng)目中以它為模板演練了通過 Schematics 添加自定義的 Component,感興趣的小伙伴們可以參考一下2018-06-06angular框架實(shí)現(xiàn)全選與單選chekbox的自定義
這篇文章主要介紹了angular框架實(shí)現(xiàn)全選與單選chekbox的自定義,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07AngularJS之頁面跳轉(zhuǎn)Route實(shí)例代碼
本篇文章主要介紹了AngularJS之頁面跳轉(zhuǎn)Route ,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03angularjs 表單密碼驗(yàn)證自定義指令實(shí)現(xiàn)代碼
這篇文章主要介紹了angularjs 表單密碼驗(yàn)證自定義指令實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-10-10AngularJS ng-repeat指令中使用track by子語句解決重復(fù)數(shù)據(jù)遍歷錯(cuò)誤問題
這篇文章主要介紹了AngularJS ng-repeat指令中使用track by子語句解決重復(fù)數(shù)據(jù)遍歷錯(cuò)誤問題,結(jié)合實(shí)例形式分析了ng-repeat指令遍歷JavaScript數(shù)組錯(cuò)誤的原因與相關(guān)解決技巧,需要的朋友可以參考下2017-01-01AngularJS實(shí)現(xiàn)按鈕提示與點(diǎn)擊變色效果
這篇文章給大家介紹了如何利用AngularJS實(shí)現(xiàn)按鈕提示與點(diǎn)擊變色的效果,文中提供了實(shí)例代碼,對大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值,下面來一起看看吧。2016-09-09