javascript - 在属性指令中创建禁用绑定(bind)

Question

我正在尝试创建一个非常简单的字符计数器指令，我可以在任何 textarea 或 input 上放置一个属性，并获得一个简单的方法来获得 input/textarea 服从 angulars ng-maxlength 并且能够防止输入超过该点并在 input/textarea 之后附加一个简单的 span 元素会有一个字符倒计时。

我现在想弄清楚的是，一旦达到最大字符数，如何将 input/textarea 的禁用状态绑定(bind)为禁用

angular.module('bidrAdminApp')
  .directive('characterCounter', function ($compile) {
    return {
      restrict: 'A',
      scope: {
        characterCount: '=ngModel',
        maxLength: '=ngMaxlength'
      },
      link: function postLink(scope, element, attrs) {
        console.log(attrs);
        var el = '<i>{{maxLength - characterCount.length}}</i>';
        el = $compile(el)(scope);
        $(element).after(el);
      }
    };
  });

到目前为止，模板非常简单

Answer 1

我不建议注册任何 $watcher。在您的情况下，一个简单的事件监听器就足够了:

angular
  .module('app', [])
  .directive('myMaxCount', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attr) {
      var max = attr.myMaxCount;
      
      element.on('keydown', keydownHandler);
      scope.$on('$destroy', function () {
        element.off('keydown', keydownHandler);
      });      
      
      function keydownHandler (e) {
        if(e.target.value.length + 1 > max) {
          e.preventDefault();
        }
      }
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <input type="text" my-max-count="5"/>
</div>

这样不会污染你的 $digest 循环 :) 请注意，您必须注销监听器以防止内存泄漏。