angularjs自定义指令中的ng-change函数在用户第二次输入后更新输入值
Posted
技术标签:
【中文标题】angularjs自定义指令中的ng-change函数在用户第二次输入后更新输入值【英文标题】:ng-change function in angularjs custom directive updating input value after second input from the user 【发布时间】:2017-03-12 14:22:48 【问题描述】:此函数工作正常,但是当用户在文本字段中输入第一个数字时,它会作为空值传递给控制器,并且在第二次输入后它将第一个输入传递给控制器。我想在第一次输入时用正确的值而不是空值来为控制器取值。
我已经为号码验证创建了自定义指令
app.directive('faxFormat', ['$filter', function($filter)
function link(scope, element, attributes)
// scope.inputValue is the value of input element used in template
scope.inputValue = scope.phonenumberModel;
scope.$watch('inputValue', function(value, oldValue)
value = String(value);
var number = value.replace(/[^0-9]+/g, '');
// scope.phonenumberModel = number;
scope.inputValue = $filter('phonenumber')(number);
scope.phonenumberModel = scope.inputValue;
);
scope.$watch('phonenumberModel', function(value, oldValue)
scope.inputValue = scope.phonenumberModel;
);
// element.bind('click', function()
// scope.method();
// );
scope.phoneFocused = function()
scope.method();
return
link: link,
//restrict: 'A',
//require: 'ngModel'
restrict: 'E',
scope:
method: '&',
phonenumberPlaceholder: '=placeholder',
phonenumberModel: '=model',
myid: '=myid'
,
template: '<input ng-model="inputValue" type="tel" id="myid" class="phonenumber cls" ng-trim="false" placeholder="phonenumberPlaceholder" title="Phonenumber (Format:999-999-9999 or 1-999-999-9999)" ng-change="phoneFocused()">'
;
]);
这是我的控制器
$scope.removePhoneErrorHighlight = function()
var fax =$scope.phoneData.phoneNumber;
console.log(fax);
这是我的html代码
<fax-format class="faxFormat" myid="'accountPhone'" placeholder="'555-555-5555'" model="phoneData.phoneNumber" method="removePhoneErrorHighlight()" data-ng-focus="removePhoneErrorHighlight()"></fax-format>
【问题讨论】:
【参考方案1】:试试这个方法
link: function (scope, element, attrs, ngModelCtrl)
// on change of modal
element.on("change", function (e)
scope.$apply(function ()
ngModelCtrl.$setViewValue(element.val());
);
);
如果 DOM 发生变化,则将更新后的值设置为范围。
对于控制器实例,在指令中包含 require: 'ngModel'。
if element.on("change", ... (这个语法不确定) 如果它不起作用,请告诉我。
【讨论】:
我试过但不知道在哪里应用这个功能并检查它。如果我应用更改代码给出错误。以上是关于angularjs自定义指令中的ng-change函数在用户第二次输入后更新输入值的主要内容,如果未能解决你的问题,请参考以下文章