Директива углового номера телефона с использованием intl-tel-input lib

в настоящее время я пытаюсь создать пользовательскую директиву, которая инициализировала бы ввод со следующим lib : intl-tel-input .

поэтому я загрузил необходимое .файл js с bower:

<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.telмодель, она всегда не определена. Кажется, что входные данные не обновляют значение модели на лету.

поэтому я должен написать что-то вроде этого, чтобы связать фактическое значение моего поля ввода с моим не обновленным значением модели :

    $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 неопределено функция инициализации не дошли... Ты хоть представляешь, как я могу решить свою проблему?

6
angularjs directive

4 ответов

вы правы, что модель не обновляется автоматически. Вы могли бы сделать такую директиву

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

12

существует новая директива под названием international-phone-number @ https://github.com/mareczek/international-phone-number

пожалуйста, оформить заказ, любые взносы приветствуются

4

некоторые из нас использовали директиву Маркса, но отсутствие тестирования и требуемое положение jquery в голове вызывало проблемы так :

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

проверите его вне, блок и функционально испытанный с транспортиром Поиграйте с ним здесь:

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

4

директива Марка сработала для меня: https://github.com/mareczek/international-phone-number

одна проблема с intl-tel-input (по крайней мере, с v3.6) это то, что он не форматирует номер телефона, который вы инициализируете правильно*, если у вас нет знака плюс ( ' + ' ) перед ним. Это приводит к фанковому поведению для моих пользователей. Я храню свои телефонные номера нормализованными (без знака плюс) в своей базе данных, поэтому мне нужен хак, чтобы обойти это. Вместо форматирования на сервере, я решил отформатировать номер телефона на интерфейсе. Я добавил следующее к директиве Марка, чтобы получить поведение, которое мне нужно:

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 ' (без гноя). Когда пользователь идет редактировать его, они испытывают странное поведение, потому что плюса нет.

2