详解Angularjs 如何自定义Img的ng-load 事件

时间:2019-08-17 07:03来源:计算机教程
在使用AngularJs的过程中,我们常常会用到一些ng-事件,如ng-click、ng-change等,这些事件都是AngularJs事先为我们定义好的。也有的情况下,我们会用到一些使用频率不高的dom事件,如img的

在使用AngularJs的过程中,我们常常会用到一些ng-事件,如ng-click、ng-change等,这些事件都是AngularJs事先为我们定义好的。也有的情况下,我们会用到一些使用频率不高的dom事件,如img的onload(图片加载完成后触发),但AngularJs中默认没有这个事件,那么我们该如何自定义添加ng-load这个事件呢?

这两天学习了angularjs 感觉指令这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。

只需要给app对象添加如下指令即可:

先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果:

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);
      });
    }
  };
})
var count=0;
$("#test").on("click",function(event){
 if(event.target.tagName.toLowerCase()=="input") return;
 count  ;
 var html="<input type='text' class='newEle' value='" count "'/>";
 $(this).html(html);
 $(".newEle").focus();
});
$("body").on("blur",".newEle",function(){
 alert($(this).val());
})

在Html中直接使用imageonload属性追加事件:

如果用angularjs应该怎么实现呢?想当然的情况是这样的:

<img ng-src="{{src}}" imageonload="doThis()" />
var myApp = angular.module('myApp', []);
    myApp.controller('MainCtrl', ['$scope','$compile',function($scope) {
      $scope.count = 0;
      $scope.add = function() {
       if(event.target.tagName.toLowerCase()=="input")return;
        var target=$(event.target);
        $scope.count  ;
        target.html("<input value='" $scope.count "' ng-blur='showValue()'>" );
      }
      $scope.showValue=function(){
        alert(event.target.value)
      }
    }])

最后,在controller中写对应的事件内容即可:

理想很丰满,点击test的时候内容确实变成了input,但是input不能绑定任何ng事件。

编辑:计算机教程 本文来源:详解Angularjs 如何自定义Img的ng-load 事件

关键词: