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