屬性指令訪問元素和添加列表器

我需要編寫一個使用Angular 1.5.5的屬性指令，它基本上限制文本框的按鍵事件上的輸入。因此，它應該是這樣的屬性指令訪問元素和添加列表器

<input type="number" name="age" id="age" restrict-char="['e','-']" />

我們怎樣才能寫出一個屬性指令，而無需使用鏈接功能。我不想使用鏈接功能，因爲我會將我的代碼庫移植到Angular 2.0中，並且鏈接功能不受支持。

來源

2016-05-25 ATHER

你就不能使用輸入'pattern'？ – charlietfl

是啊我試過了，ng-pattern在按鍵上不起作用。這意味着我將不得不將事件列表添加到所有文本框中，無論我需要限制該輸入。 – ATHER

不確定這是否是你想要的，但是你可以在ngModelController上使用$ parser並且在任何事件上設置ng-model-options來更新。

angular.module('app', []); 
 

 
angular.module('app').directive('restrictChar',() => { 
 
    return { 
 
    restrict: 'A', 
 
    require: 'ngModel', 
 
    scope: { 
 
     restricted: '=restrictChar' 
 
    }, 
 
    controller: function ($scope, $element) { 
 
     const ngModel = $element.controller('ngModel'); 
 
    
 
     ngModel.$parsers.unshift((value) => { 
 
     const newVal = value 
 
      .split('') 
 
      .filter((char) => $scope.restricted.indexOf(char) === -1) 
 
      .join(''); 
 
     
 
     $element.val(newVal); 
 
     
 
     
 
     return newVal; 
 
     }); 
 
    } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> 
 
<div ng-app="app"> 
 
    <input type="text" ng-model="x" name="age" id="age" restrict-char="['e','-']" ng-model-options="{updateOn: 'keyup'}" /><br> 
 
    {{x}} 
 
</div>

來源

2016-05-26 08:37:05 sielakos

非常感謝您的回答，但我仍然可以在您的代碼示例中鍵入' - '和'e'，但我認爲您近距離..很接近 – ATHER

@ATHER現在應該沒問題了 – sielakos

屬性指令訪問元素和添加列表器

回答

相關問題