無法在Angular中使用ng-minlength輸入自定義指令

我在此gist上基於電話號碼格式指令。一切都很好。但是如果我添加ng-minlength或ng-maxlength驗證要求，輸入根本不會接受任何輸入。無法在Angular中使用ng-minlength輸入自定義指令

.directive('phonenumberDirective', ['$filter', function($filter) { 

    function link(scope, element, attributes) { 

    scope.inputValue = scope.phonenumberModel; 

    scope.$watch('inputValue', function(value, oldValue) { 

     value = String(value); 
     var number = value.replace(/[^0-9]+/g, ''); 
     scope.phonenumberModel = number; 
     scope.inputValue = $filter('phonenumber')(number); 
    }); 
    } 

    return { 
    link: link, 
    restrict: 'E', 
    scope: { 
     phonenumberPlaceholder: '=placeholder', 
     phonenumberModel: '=model'}, 
     template: '<input ng-model="inputValue" type="tel" id="phone" name="phone" ng-minlength="7" class="phonenumber form-control" placeholder="{{phonenumberPlaceholder}}" required /> ' 
    } 
}]);

HTML：

<label class="control-label" for="phone">Phone</label> 
<phonenumber-directive placeholder="'(000) 000-0000'" model='contactForm.contact.phone'></phonenumber-directive> 

<span ng-show="myForm.phone.$error.required && !myForm.phone.$untouched 
|| myForm.phone.$error.required && !myForm.phone.$untouched 
|| myForm.phone.$error.minlength && !myForm.phone.$untouched" class="help-block"> 
Enter your phone number</span>

來源

2015-09-14 Ken

有類似的問題，這可能對你有一些幫助： https://github.com/angular/angular.js/issues/12158 – Thibs

如果我正確理解你的問題，這是正常現象。如果輸入未通過驗證管道，您的ng-model將不會更新。

在這種情況下，您不會看到您的看守人被解僱，直到遇到ng-minlength。另外，您可能需要考慮在屬性級指令（yours是一個元素指令）上使用ngModelController作爲維持視圖值與其基礎模型值之間差異的更「角度」方式。您目前正在更新inputValue，該觀察者正在尋找inputValue的更新，這可能會導致意外的行爲。

來源

2016-01-11 15:04:01 vgmcglaughlin

無法在Angular中使用ng-minlength輸入自定義指令

回答

相關問題