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

【问题标题】：AngularJS International Phone Number Validation Directive MisbehavingAngularJS 国际电话号码验证指令行为不端
【发布时间】：2015-05-20 17:10:04
【问题描述】：

AngularJS International Phone Number Directive 遇到了一个非常令人费解的问题。

我有一个表单，它有一个 text 类型的 input 元素，并分配了国际电话号码指令。

表格：

<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="natPhone" 的输入是产生问题的输入。我以原始形式保存用户给出的数字，即没有任何格式。该数字由指令自动格式化为用户类型。问题是当我尝试将其显示在屏幕上进行编辑时。

示例： 该型号具有以下编号：12015555555。这是一个有效的美国编号。当我单击编辑按钮时，会显示上面的表单，其中包含输入。输入显示数字（12015555555）。如果我键入单击它并按任意键；假设空格键或“a”或其他任何内容，该指令会立即运行并将数字格式化为：+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 is still running 错误。 2）我试图触发（'keypress'）事件，以便它识别按键并格式化它。

请根据您的建议指导我。

【问题讨论】：

你能制作一个 plunker 来演示这个问题，以便我们可以更轻松地帮助你吗？
我试过了，但我没有让它工作。在 Plunker 和 JSFiddle 上都试过了。

标签： javascript jquery angularjs

【解决方案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);
    }
}

});

【讨论】：