文章目录

angularjs中没有实现ng-input函数,因为它建议使用ng-model和ng-change来做model数据变化的监听,这样做在性能等各方面都更好,但是如果我们要做一些实时性较高的事情就不行了。比如实时监听输入框输入的东西来处理一些事情,如果我们使用ng-change做做不到实时性了,如果用watch来监听model的话也不能保证实时的。所以我们可以使用directive很容易实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var App = angular.module('yigo', []);
App.directive('ngInput', [function () {
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, element, attrs) {
element.on('input',oninput);
scope.$on('$destroy',function(){//销毁的时候取消事件监听
element.off('input',oninput);
});
function oninput(event){
scope.$evalAsync(attrs['ngInput'],{$event:event,$value:this.value});
}
}
}
}]);

App.controller('DemoCtrl',['$scope',function($scope){
$scope.onCardNoIn = function(value){
console.log('input:',value);
}
}])
1
<input name="cardNo" ng-model="formData.cardNo" ng-input="onCardNoIn($value)" type="tel" required ng-minlength="16" maxlength="19" placeholder="请填写16-19位卡号">

scope.$evalAsync和scope.$eval 都是执行语法,用scope.$evalAsync可以保证和$scope同步,详见angularjs官方文档

此文是本站原创,转载请标注作者和链接出处!