[英]How to create custom directive to listen to input changes
嗨,我在這里寫了一個自定義指令。 該指令需要在值更改時每次調用。 這是我的指令。 我該如何調用ng-change.here是我的指令。
app.directive('percentageFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModelController) {
ngModelController.$parsers.push(function(data) {
//convert data from view format to model format
return data.replace('%','');
});
ngModelController.$formatters.push(function(data) {
//convert data from model format to view format
return data+'%';
});
}
}
});
JSP:-
<input type="text" percentage-formatter ng-model="tea">
在這里,如何在ng-change中調用該指令。
$scope.watch
函數$scope.watch
值的變化。 將此添加到您的指令
$scope.$watch(function () {
// do soething
});
或者,您也可以使用以下一種用途。
element.bind('keypress', function(event) {
if(event.keyCode === 32) {
event.preventDefault();
}
});
這就是我創建百分比格式器的方式
angular.module('test')
.directive('percentageFormatter', function() {
return {
require: '?ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
if(!ngModelCtrl) {
return;
}
ngModelCtrl.$parsers.push(function(val) {
if (angular.isUndefined(val)) {
val = '';
}
var clean = val.replace("%", '');
if (val !== clean) {
ngModelCtrl.$setViewValue(clean);
ngModelCtrl.$render();
}
return clean;
});
element.bind('keypress', function(event) {
if(event.keyCode === 32) {
event.preventDefault();
}
});
}
};
});
我的第一個想法是使用$ watch():
app.directive('percentageFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModelController) {
scope.$watch(
() => ngModelController.$modelValue,
(newval) => {
// Do your stuff here - the value has changed!
}
);
}
);
直接在指令中調用change事件。試試看
app.directive('percentageFormatter', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModelController) {
element.bind('change', function () {
ngModelController.$setViewValue(element.val());
ngModelController.$render();
});
}
}
});
我該如何調用ng-change.here是我的指令。
在底層 1 , ng-change指令使用ngModelController。$ viewChangeListeners API 。 percentageFormatter
指令可以執行以下操作:
ngModelController.$viewChangeListeners.push(function myChange() {
//Do things as if called by ng-change
});
僅當輸入值的更改導致將新值提交給模型時,才會評估myChange
函數。
不會被評估:
$parsers
轉換管道返回的值未更改 null
這為指令提供了可靠的“ ng-change”功能,而無需添加其他監視程序或事件偵聽器。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.