angularjs 如何使用intl-tel-input库创建自定义电话号码指令

6tr1vspr 于 6个月前发布在 Angular

关注(0)|答案(4)|浏览(115)

我目前正在尝试创建一个自定义指令，该指令将使用以下lib初始化输入：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()">
And I'm initializing it at the beginning of my controller like this :

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未定义，因此永远不会达到初始化函数。
我该怎么解决这个问题呢？

angularjs

来源：https://stackoverflow.com/questions/24753819/how-to-create-a-custom-phone-number-directive-using-intl-tel-input-lib

4条答案

按热度按时间

jecbmhm31#

你说得对，模型不会自动更新。

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

赞(0）回复(0）举报 6个月前

gc0ot86w2#

有一个新的指令称为国际电话号码@https://github.com/mareczek/international-phone-number
请结帐，任何贡献是受欢迎的

赞(0）回复(0）举报 6个月前

a9wyjsp73#

我们中的一些人使用了Marks的指令，但是缺乏测试和jquery在头部的位置要求导致了问题，所以创建了ng-intl-tel-input：
https://github.com/hodgepodgers/ng-intl-tel-input
看看它，它的单位和功能测试与量角器玩它在这里：
http://hodgepodgers.github.io/ng-intl-tel-input/的

赞(0）回复(0）举报 6个月前

vltsax254#

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'（没有pus）.当用户去编辑它，他们遇到古怪的行为，因为加号不存在.

赞(0）回复(0）举报 6个月前

我来回答

angularjs 如何使用intl-tel-input库创建自定义电话号码指令

4条答案

相关问题

热门标签

最新问答