角度指令更新不同事件的视图（字符计数器）答案

【问题标题】：Angular directive update view on different events (Character Counter)角度指令更新不同事件的视图（字符计数器）
【发布时间】：2016-01-18 01:44:26
【问题描述】：

我正在尝试为输入字段构建一个 characterCounter 属性指令。我的想法是要求：'ngModel' 来获取 ng-model 中 modelValue 的长度，并在指令范围内传递一个 max-length。

<input ng-model="inputModel" max-character-counter max-length="10"/>

我在大多数情况下都有我的指令，我只是在为如何更新视图而苦苦挣扎。非常感谢您提供任何帮助。

angular.module('app').directive('maxCharacterCounter', [function(){
return {
  restrict: 'A',
  require: '?ngModel',
  scope: {
    maxLength: "="
  },
  link: function (scope, elem, attrs, ngModel) {
    if (!ngModel) return;

    console.log(ngModel);

    ngModel.$render = function() {
      console.log('render');
      var el = angular.element(attrs.$$element);
      el.after('<span class="input-group-addon">' + scope.charactersLeft + '</span>');
    }

    elem.on('blur keyup change', function() {
      scope.$evalAsync(read);
    });
    read();

    function read() {
      scope.charactersLeft = ngModel.$modelValue.length == undefined ? scope.maxLength : scope.maxLength - ngModel.$modelValue.length;
      console.log('Characters Left:', scope.charactersLeft);
      console.log('View Value: ', ngModel.$viewValue);
      console.log('Model Value: ', ngModel.$modelValue);
      updateViewValue();
    }

    function updateViewValue() {
      //How do I update the view for scope.charactersLeft
      //ngModel.$viewValue(scope.charactersLeft);
      console.log('scope: ', scope);
    }
  }
}}]);

Plunker：http://plnkr.co/edit/F0PzE6?p=preview

最终解决方案：

angular.module('app').directive('maxCharacterCounter', ['$timeout', '$log', function($timeout, $log) {
return {
  restrict: 'A',
  require: '?ngModel',
  scope: {
    maxLength: "@"
  },
  link: function (scope, elem, attrs, ngModel) {
    if (!ngModel) {
      $log.warn('ngModel doesn\'t exist. There is no way to calculate characters left');
      return;
    }

    elem.wrap('<div class="input-group"></div>');
    elem.after('<span class="input-group-addon"></span>');

    elem.on('blur keyup keydown change', function() {
      scope.$eval(updateCharacterCount);
      updateViewValue();
    });

    $timeout(function(){
      scope.maxLength = scope.maxLength || 140;
      scope.$eval(updateCharacterCount);
      updateViewValue(); 
    });

    function updateCharacterCount() {
      scope.charactersLeft = !ngModel.$viewValue ? scope.maxLength : scope.maxLength - ngModel.$viewValue.length;
    }

    function updateViewValue() {
      var element = elem.next('span');
      element.text(scope.charactersLeft);
      element.toggleClass('redText', scope.charactersLeft <= 0 ? true : false);
    }
  }
}}]);

【问题讨论】：

查看我对模板使用示例的回答。如果您遇到其他问题。告诉我
plnkr.co/edit/F0PzE6?p=preview 无法访问

标签： angularjs twitter-bootstrap

【解决方案1】：

尝试如下。添加模块的第二个参数。

angular.module('app', [])
	.directive('maxCharacterCounter', function() {
	  return {

	    restrict: 'A',

	    require: '?ngModel',

	    scope: {
	      maxLength: "="
	    },

	    link: function(scope, elem, attrs, ngModel) {
	      if (!ngModel) return;

	      ngModel.$render = function() {
	        console.log('render');
	        var el = angular.element(attrs.$$element);
	        el.after('<span ng-bind="charactersLeft" class="input-group-addon">' + scope.charactersLeft + '</span>');
	      }

	      elem.on('blur keyup change', function() {
	        scope.$evalAsync(read);
	      });
	      read();

	      function read() {
	        scope.charactersLeft = ngModel.$modelValue.length == undefined ? scope.maxLength : scope.maxLength - ngModel.$modelValue.length;
	        updateViewValue();
	      }

	      function updateViewValue() {
	        angular.element(attrs.$$element).next('span').text(scope.charactersLeft);
	      }
	    }
	  }
	});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="app"> 
  <input ng-model="inputModel" max-character-counter max-length="10"/>
</body>

【讨论】：

我不确定这对我有什么帮助。我试图在我的指令是一个属性之后添加一个模板。我不想构建一个包含输入的元素指令。 var el = angular.element(attrs.$$element); el.after(//应用模板);
我明白你的意思了。让我知道您当前的问题。请重新访问更新它
更新了答案。立即查看

【解决方案2】：

在 Angular 中，您可以直接绑定到输入模型的长度，如下所示：

{{inputModel.length}}

除非我遗漏了什么，这不就是你所需要的吗？

【讨论】：

这是一个与你的想法有点不同的问题。我已经在我的指令中使用 .length 来计算剩余的字符。我的问题是我正在使用 .after() 将模板推送到 dom 上。当您键入时，我需要一种方法来更新 dom 上显示的内容。 Venkatraman 给了我我想要的东西。