发布于 2017-04-30 15:27:47 | 93 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的AngularJS Tutorial中文版,程序狗速度看过来!

AngularJS 前端JS框架

AngularJS诞生于Google是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。


本篇文章主要介绍了详解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
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持phperz。



相关阅读 :
详解Angularjs 如何自定义Img的ng-load 事件
详解angularJs中自定义directive的数据交互
详解AngularJS中自定义过滤器
AngularJS创建自定义指令的方法详解
举例详解AngularJS中ngShow和ngHide的使用方法
详解angular2采用自定义指令(Directive)方式加载jquery插件
AngularJS使用自定义指令替代ng-repeat的方法
详解AngularJS如何实现跨域请求
详解AngularJS中$filter过滤器使用(自定义过滤器)
AngularJS之自定义服务详解(factory、service、provider)
Angularjs 自定义服务的三种方式(推荐)
详解Angularjs中的依赖注入
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务