Question

我需要使用Angular 1.5.5编写属性指令，这基本上限制了对文本框的按键事件的输入。所以看起来应该是这样的

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

如何在不使用链接功能的情况下编写属性指令。我不想使用链接功能，因为我将我的代码库移植到Angular 2.0并且不支持链接功能。

Answer 1

不确定这是否是您想要的，但您可以在ngModelController上使用$ parsers并设置ng-model-options以更新任何事件。

＆＃13;

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;
      });
    }
  };
});

＆＃13;

<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>

＆＃13;

属性指令访问元素并添加列表器

1 个答案: