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

在使用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 事件

关键词：