在使用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 事件
关键词: