詳解Angularjs 如何自定義Img的ng-load 事件
更新時(shí)間：2017年02月15日 15:58:58 作者：巴拉森
本篇文章主要介紹了詳解Angularjs 如何自定義Img的ng-load 事件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
在使用AngularJs的過程中，我們常常會用到一些ng-事件，如ng-click、ng-change等，這些事件都是AngularJs事先為我們定義好的。也有的情況下，我們會用到一些使用頻率不高的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í)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
Angular實(shí)現(xiàn)的自定義模糊查詢、排序及三角箭頭標(biāo)注功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)的自定義模糊查詢、排序及三角箭頭標(biāo)注功能,涉及AngularJS針對頁面table元素的遍歷、查詢、判斷、排序等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
在Angular中使用NgTemplateOutlet創(chuàng)建可重用組件的流程步驟
在 Angular 中,使用 NgTemplateOutlet 而不是創(chuàng)建特定組件,可以使組件在不修改組件本身的情況下輕松修改為各種用例,在本文中,您將接受一個(gè)現(xiàn)有組件并重寫它以使用 NgTemplateOutlet,需要的朋友可以參考下2024-03-03
AngularJs定制樣式插入到ueditor中的問題小結(jié)
這篇文章主要介紹了AngularJs定制樣式插入到ueditor中的問題小結(jié)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
使用AngularJS創(chuàng)建自定義的過濾器的方法
這篇文章主要介紹了使用AngularJS創(chuàng)建自定義的過濾器的方法,AngularJS是非常熱門的JavaScript庫,需要的朋友可以參考下2015-06-06
Angular6項(xiàng)目打包優(yōu)化的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于Angular6項(xiàng)目打包優(yōu)化的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Angular6具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Angular?Ngrx?Store應(yīng)用程序狀態(tài)典型示例詳解
這篇文章主要為大家介紹了Angular?Ngrx?Store應(yīng)用程序狀態(tài)典型示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
angular 服務(wù)的單例模式(依賴注入模式下)詳解
這篇文章主要介紹了angular 服務(wù)的單例模式(依賴注入模式下)詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
AngularJS入門教程之路由機(jī)制ngRoute實(shí)例分析
這篇文章主要介紹了AngularJS入門教程之路由機(jī)制ngRoute,結(jié)合實(shí)例形式分析了AngularJS路由機(jī)制的原理、ngRoute的組成、配置、參數(shù)與相關(guān)使用技巧,需要的朋友可以參考下2016-12-12
對于一個(gè)Sass用戶,只需要理解Sass擴(kuò)展部分如何工作的,就能完全理解SCSS,下面這篇文章主要給大家介紹了關(guān)于Angular中SASS樣式的詳細(xì)使用教程,需要的朋友可以參考下2022-05-05
詳解angular2.x創(chuàng)建項(xiàng)目入門指令
這篇文章主要介紹了詳解angular2.x創(chuàng)建項(xiàng)目入門指令，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10