Question

这是指令：

(function () {
    'use strict';

    angular
        .module('utils')
        .directive('phoneNumberInputFormat', phoneNumberInputFormat);

    phoneNumberInputFormat.$inject = ['$filter'];

    function phoneNumberInputFormat($filter) {
        return {
            link: link,
            scope: {
                model: '=ngModel'
            },
            restrict: 'A'
        };

        function link(scope, element, attributes) {

            scope.$watch('model', function (value, oldValue) {
                var number = String(value).replace(/[^0-9]+/g, '');
                scope.model = $filter('phoneNumber')(number);
            });
        }
    }

})();

我试图将文本框中的值基本上修改为标准电话号码。我将此指令用作文本框的属性。问题是scope.model是＆＃34;＆＃34;或者一直未定义。我希望它指向文本框正在建模的属性，以便在值更改时，此指令正确格式化电话号码。

HTML：

<input phone-number-input-format name="phone" 
  ng-minlength="14" 
  ng-maxlength="14" 
  ng-change="vm.phoneOrEmail()" 
  class="form-control form-group-lg" 
  placeholder="Phone Number" 
  type="tel" 
  ng-model="vm.registrant.HOME_PHONE_NR">

Answer 1

你的代码很好。您没有看到模型更改的原因是您将输入限制为正好14个字符。这意味着角度只有在满足限制时才会改变模型，AKA：14个字符。如果您设置ng-minlength="1"，则会在每个输入的字符上看到您的更改。请参阅：Working Example

指令尝试访问ngModel值 - 未正确通过

1 个答案: