使用 intl-tel-input lib 的 Angular 电话号码指令

Question

我目前正在尝试创建一个自定义指令，该指令将使用以下库初始化输入：intl-tel-input。

所以我用 bower 下载了所需的 .js 文件：

<script src="bower_components/intl-tel-input/build/js/intlTelInput.min.js"></script>

然后我创建我的输入：

input type="tel" class="form-control" id="tel" name="tel" ng-model="informations.tel" ng-keyup="checkPhoneFormat()" ng-click="checkPhoneFormat()">

我在控制器的开头初始化它，如下所示：

angular.element('#tel).intlTelInput({
    validationScript: "../../bower_components/intl-tel-input/lib/libphonenumber/build/isValidNumber.js",
    preferredCountries: ['en', 'fr']
});

我的问题是，当我尝试访问 informations.telmodel 时，它总是未定义。似乎输入不会即时更新模型值。

所以我必须写这样的东西来将我的输入字段的实际值与我未更新的模型值绑定：

    $scope.checkPhoneFormat = function(){
        $scope.informations.telephone = angular.element('#telephone').val();
        ...}

可能没问题，但我想创建一个自定义指令来初始化此类输入，例如：

app.directive('phoneInput', function (PhoneFactory) {
    return {
        require: 'ngModel',
        restrict: 'A',
        scope: {
            phoneNumber: '='
        },
        link: function (scope, element, attrs, ctrl) {
            element.intlTelInput({
                 validationScript: "../../bower_components/intl-tel-input/lib/libphonenumber/build/isValidNumber.js",
                 preferredCountries: ['en', 'fr']
            });

            ctrl.$parsers.unshift(function(viewValue) {
                console.log(viewValue);
            });
        }
    };
});

但由于 ngModel 未定义，因此永远无法达到初始化函数...您知道如何解决我的问题吗？

Answer 1

您是对的，模型不会自动更新。 你可以做一个这样的指令

app.directive('intlTel', function(){
  return{
    replace:true,
    restrict: 'E',
    require: 'ngModel',
    template: '<input type="text" placeholder="e.g. +1 702 123 4567">',
    link: function(scope,element,attrs,ngModel){
      var read = function() {
        var inputValue = element.val();
        ngModel.$setViewValue(inputValue);
      }      
      element.intlTelInput({
        defaultCountry:'fr',
      });
      element.on('focus blur keyup change', function() {
          scope.$apply(read);
      });
      read();
    }
  }
});

可以这样称呼

<intl-tel ng-model="model.telnr"></intl-tel>

这是Plunker

Answer 2

有一个新指令叫做国际电话号码@https://github.com/mareczek/international-phone-number

请结帐，欢迎任何贡献

Answer 3

我们中的一些人使用了 Marks 的指令，但缺乏测试和 jquery 在头部所需的位置导致了问题，因此创建了 ng-intl-tel-input：

https://github.com/hodgepodgers/ng-intl-tel-input

检查一下，它是用量角器进行的单元和功能测试 在这里玩它：

http://hodgepodgers.github.io/ng-intl-tel-input/

Answer 4

Mark 的指令对我有用： https://github.com/mareczek/international-phone-number

intl-tel-input（至少在 v3.6 中）的一个问题是它不会正确格式化您初始化它的电话号码*，除非它前面有一个加号 ('+')。这会导致我的用户出现奇怪的行为。我将我的电话号码标准化（没有加号）存储在我的数据库中，所以我需要一个黑客来解决这个问题。我没有在服务器上格式化，而是选择在前端格式化电话号码。我在 Mark 的指令中添加了以下内容以获得我需要的行为：

var makeSureInitialValueStartsWithPlusSign = function() {
  var clear_watcher = scope.$watch(attrs.ngModel, function(changes) {
    elem_val = element.val();
    if (elem_val && elem_val[0] != "+") {
      element.val("+" + changes);
      clear_watcher();
    }
  });
};
makeSureInitialValueStartsWithPlusSign();

谢谢马克

*正确地说，我的意思是将“19734566789”转换为“+1 973-456-6789”。 int-tel-input 将“19734566789”转换为“1 973-456-6789”（没有脓液）。当用户去编辑它时，他们会遇到奇怪的行为，因为加号不存在。