在 Angular 中使用 jquery 插件

【问题标题】：Use jquery plugin within angular在 Angular 中使用 jquery 插件
【发布时间】：2014-12-11 10:16:39
【问题描述】：

如何在我的 Angular 应用中使用 intl-tel-input(https://github.com/Bluefieldscom/intl-tel-input) jquery 插件来格式化手机号码字段。

【问题讨论】：

【解决方案1】：

您需要加载 jQuery 并将其包装在指令中。

指令定义：

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

【讨论】：