angularjs自定义指令中的ng-change函数在用户第二次输入后更新输入值

Posted 2023-03-05

【中文标题】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", ... (这个语法不确定) 如果它不起作用，请告诉我。

【讨论】：

我试过但不知道在哪里应用这个功能并检查它。如果我应用更改代码给出错误。