textarea $watch scrollheight 和 scrolltop 不会触发更新

Question

我正在编写一个简单的 Angular 指令，用于在 textarea 旁边显示行号。但是，由于某种原因，$watch 表达式不会触发更新。代码如下：

    mod.directive('newTextArea', function() {
      return {
        restrict: 'E',
        scope: {
          query: '='
        },
        template:
          '<div>' +
          '  <div ng-style="{height: height}" style="width: 20px; float: left; color: gray; font-family: Courier New; font-size: 14px; overflow: hidden; height: 85px; position: relative; top: 5px;">' +
          '    <div style="position: absolute">' +
          '    <span ng-repeat="line in lines">{{line}}<br></span>' +
          '    </div>' +
          '  </div>' +
          '  <textarea id="query-area" style="overflow-x: scroll; font-family: Courier New; font-size: 14px;">' +
          '  </textarea> {{ lines }}' +
          '</div>',
        controller: function($scope, $attrs, $element) {
          var textarea = document.getElementById('query-area');

          function updateLayout() {
              var st = textarea.scrollTop;
              var h = textarea.scrollHeight;
              $scope.height = h;
console.log(st, h);
              if (st !== undefined && h !== undefined) {
                var start = Math.round(st / 14);
                var stop = Math.round((st + h) / 14);
                $scope.lines = _.range(start+1, stop+1);
            }
          }

          $scope.$watch(
            function() {
              return [textarea.scrollHeight, textarea.scrollTop];
            }, updateLayout, true
          );
        }
      };

文本区域滚动或大小发生变化时，行号应立即更新。知道为什么这不起作用吗？

Answer 1

观察者在摘要循环期间运行。在文本区域写入不会导致摘要循环开始，因此永远不会执行观察者。

例如，如果您将 ng-model="something" 添加到 textarea 元素中，它将起作用，此后 Angular 将绑定到一堆事件并在它们触发时在内部触发摘要循环。

在不依赖其他东西来触发摘要循环的情况下，您可以将$watch 替换为以下内容：

var listener = function() {
  $scope.$apply(updateLayout);
};

angular.element(textarea).on('keyup keydown keypress change', listener);

updateLayout();

$scope.$on('$destroy', function () {
  angular.element(textarea).off('keyup keydown keypress change', listener);
});

演示：http://plnkr.co/edit/nIkGyhM75OScU8ZyosyP?p=preview