Question

我一直面临着AngularJS International Phone Number Directive的一个非常令人费解的问题。

我的表单中有一个输入元素 text 分配了international-phone-number指令。

形式：

<form name="phoneMask" novalidate class="editable-wrap">

      <span class="bold inline-text title" ng-hide="!phone.primary">
            Primary:
      </span>
      <span class="bold inline-text title" ng-hide="phone.primary">
            Alternate:
      </span>


        <span ng-show="!phoneForm.$visible" class="bold title">
            {{phone.telephoneNumber}}
        </span>

        <span ng-show="!phoneForm.$visible">
            ({{showStatus($index).text}})
        </span>
            <div><label ng-show="phoneForm.$visible" class="title" for="natPhone">Phone Number</label><input id="natPhone" ng-show="phoneForm.$visible" type="text" class="editable-input" name="natPhone" international-phone-number utils-script="script/vendor/jquery/libphonenumber-utils.js" ng-model="phone.telephoneNumber" required alt="Phone Number" /></div>

</form>

现在输入id =＆＃34; natPhone＆＃34;是输入创造问题。我以原始形式保存用户提供的号码，即没有任何格式。该数字由指令自动格式化为用户类型。问题是当我尝试在屏幕上显示它进行编辑时。

示例： 该型号具有以下编号：12015555555。这是一个有效的美国编号。单击编辑按钮时，将显示上面的表单，其中包含输入。输入显示数字（12015555555）。如果我输入，请点击它并按任意键;让我们说空格键或者＆＃39; a＆＃39;或者其他任何东西，该指令立即运行并格式化为：+1 201-555-5555。

问题陈述： 我希望它在单击编辑按钮并显示输入元素时显示格式化的数字。

观察： 在输入框中按任意键之前，class属性具有不同的值，这也是数字显示为非格式化的时间。 class="editable-input ng-pristine ng-valid ng-scope ng-valid-required ng-touched"

当按下某个键时，可以看到以下值： class="editable-input ng-valid ng-scope ng-valid-required ng-touched ng-dirty ng-valid-international-phone-number ng-valid-parse"

我尝试了什么： 1）我尝试过JQuery的change（）函数，但Angular抛出$ apply仍然运行错误。 2）我试图触发（＆＃39; keypress＆＃39;）事件，以便识别按键并对其进行格式化。

请引导我提出建议。

Answer 1

有几种方法可以做到，如果你可以设置一个“失败”的例子，它会更容易解决。

还要检查新发布的修补程序版本。

您可以设置自己的指令来格式化数字。

myModule.directive('phoneHelper', function(){
return {
    restrict: 'A',
    require: '?ngModel',
    link: function (scope, element, attr, ctrl) {
        if (!ctrl) {
            return;
        }
        function updateView() {
            var formatters = ctrl.$formatters;
            var idx = formatters.length;
            var value = ctrl.$modelValue;
            while (idx--) {
                value = formatters[idx](value);
            }
            if (ctrl.$viewValue !== value) {
                ctrl.$viewValue = value;
                ctrl.$render();
            }
        }

        scope.$on('editButtonClicked',updateView)
        //element.on('blur', updateView);
    }
}

}）;

AngularJS国际电话号码验证指令行为不端

1 个答案: