我有一個角度自定義輸入組件。我想設置它的maxlength屬性。這裏是指令

Question

我有一個角度自定義輸入組件。我想在這個組件上設置maxlength屬性，但不知道如何。通常的ng-maxlength和maxlength（HTML）不起作用。

這裏是我的directive-

numericApp.directive('decimalInput',['$timeout', '$filter','readonlysvc', '$compile',function($timeout, $filter,readonlysvc,$compile) { 
var withoutDecimal='<input type="number" ng-model="ngModel" class="form-control" ng-show="showNumber" ng-blur="numberBlurred()" only-number/><input value="{{formatted}}" ng-focus="textFocused()" class="form-control" ng-click="textFocused()" ng-hide="showNumber" only-number/>'; 
var withDecimal='<input type="number" ng-model="ngModel" class="form-control" ng-show="showNumber" ng-blur="numberBlurred()" /><input value="{{formatted}}" ng-focus="textFocused()" class="form-control" ng-click="textFocused()" ng-hide="showNumber" />'; 
var getTemplate = function(decimalLength){ 
    var template = ''; 
    decimalLength = decimalLength||0; 
    if(decimalLength==0) { 
     template = withoutDecimal; 
    } else { 
     template = withDecimal; 
    } 
    return template; 
}; 
return { 
    restrict: 'E', 
    template: '<input type="number" ng-model="ngModel" class="form-control" ng-show="showNumber" ng-blur="numberBlurred()" /><input value="{{formatted}}" class="form-control" ng-click="textFocused()" ng-hide="showNumber"/>', 
    scope:{ 
     ngModel : "=" 
    }, 
    link: function($scope, $elm, $attrs) { 
     var result=parseFloat($attrs.value||0); 
     $scope.ngModel=result; 
     $elm.html(getTemplate($attrs.decimals)); 
     var liveRegion= $('.number-input-accessible'); 
     if (liveRegion.length == 0) { 
      liveRegion = $("<span>", { 
       role: "status", 
       "aria-live": "assertive", 
       "aria-atomic":"true" 
      }) 
       .addClass("number-input-accessible screen-reader") 
       .appendTo(document.body); 
     } 
     $elm.find('input[type=number]').focus(function() { 
      var ariaText=$.i18n.prop("numeric.decimal.value"); 
      var editUnavailableText=$.i18n.prop("numeric.edit.unavailable"); 
      if ($elm.find('input').attr('readonly')) { 
       ariaText = ariaText+" "+editUnavailableText; 
      } 
      liveRegion.text(ariaText); 
     }); 
     $compile($elm.contents())($scope); 
     $scope.showNumber = false; 
     $scope.numberBlurred = function(){ 
      $scope.showNumber = false; 
     }; 

     $scope.textBlurred = function(){ 
      $scope.showNumber = true; 
     }; 

     $scope.textFocused = function(){ 
      $scope.showNumber = true; 
      $timeout(function(){ 
       $elm.find('input[type=number]').focus(); 
      }, 50) 
     }; 

     $scope.$watch('$scope.showNumber',function(){ 
      if($scope.showNumber){ 
       $timeout(function(){ 
        $elm.find('input[type=number]').focus(); 
        console.log('focused'); 
       }, 50) 
      } 
     },true); 

     $scope.$watch(function() { return $elm.attr('ng-readonly') },function(value){ 
      if(value !== undefined){ 
       readonlysvc.toggle($elm,$elm.attr('ng-readonly')); 
      } 
     }); 

     $scope.$watch('ngModel', function(){ 
      var formatted; 
      formatted = $filter("number")($scope.ngModel, $attrs.decimals); 
      $scope.formatted = formatted; 

     }, true); 
    } 
}; 
} 
] 
); 

的HTML代碼：

<decimal-input ng-model="requisition.unitPrice" decimals="4"    id="unitprice" on-change="callCalculateTax()"></decimal-input> 

請大家幫幫忙。

Answer 1

做一個單獨的屬性指令

你可以讓一個指令是「E」或「A」，通過使「A」也可以是具有特定屬性的屬性。通過構建一個屬性指令，你可以有單獨的代碼來限制你的輸入。這裏是從tymeJV

app.directive("limitTo", [function() { 
    return { 
     restrict: "A", 
     link: function(scope, elem, attrs) { 
      var limit = parseInt(attrs.limitTo); 
      angular.element(elem).on("keydown", function() { 
       if (this.value.length == limit) return false; 
      }); 
     } 
    } 
}]); 

<input limit-to="4" type="number" class="form-control input-lg" ng-model="search.main" placeholder="enter first 4 digits: 09XX"> 

選項2 NG-分鐘/最大長度

第二個選擇是使用內置到角的屬性所取的例子。您可以使用ng-minlength="SomeNumber"或ng-maxlength="Some Number"作爲您指令的屬性。

希望這會有所幫助。祝你好運。