我目前正在尝试创建一个自定义指令,该指令将使用以下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
未定义,因此永远不会达到初始化函数。
我该怎么解决这个问题呢?
4条答案
按热度按时间jecbmhm31#
你说得对,模型不会自动更新。
字符串
可以这样称呼
型
这是一个Plunker
gc0ot86w2#
有一个新的指令称为国际电话号码@https://github.com/mareczek/international-phone-number
请结帐,任何贡献是受欢迎的
a9wyjsp73#
我们中的一些人使用了Marks的指令,但是缺乏测试和jquery在头部的位置要求导致了问题,所以创建了
ng-intl-tel-input
:https://github.com/hodgepodgers/ng-intl-tel-input
看看它,它的单位和功能测试与量角器玩它在这里:
http://hodgepodgers.github.io/ng-intl-tel-input/的
vltsax254#
Mark的指令对我很有效:https://github.com/mareczek/international-phone-number
intl-tel-input的一个问题(至少在v3.6中)是它不会格式化你初始化的电话号码 *,除非你在它前面有一个加号('+')。这会导致我的用户的奇怪行为。(没有加号)在我的数据库,所以我需要一个黑客来解决这个问题。而不是在服务器上格式化,我选择在前端格式化电话号码。我将以下内容添加到Mark的指令中,以获得我需要的行为:
字符串
谢谢马克