gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 06:50:47 25 4
gpt4 key购买 nike

我目前正在尝试创建一个自定义指令,该指令将使用以下库初始化输入: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()">

我在 Controller 的开头初始化它,如下所示:

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

我的问题是,当我尝试访问informations.tel模型时,它总是未定义。看来输入不会动态更新模型值。

所以我必须编写类似的内容来将输入字段的实际值与未更新的模型值绑定(bind):

    $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 未定义,因此永远无法达到初始化函数...您知道我如何解决我的问题吗?

最佳答案

您是对的,模型不会自动更新。你可以制定这样的指令

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

关于angularjs - 使用 intl-tel-input lib 的 Angular 电话号码指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24753819/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com