调整文本区域大小时，Angular JS调整元素的大小

我正在建立一个指令，用于编写和预览类似于Github注释（对话）的注释。我的指令有两个HTML元素，一个textarea和一个div（使用角标记）。我想做的是在调整textarea的大小时调整div的大小。我已经扫描了该网站并在Google上进行了很多搜索，但没有一个纯粹的角度解决方案令人满意。

下面是我的指令简化：

    .directive('obibaCommentEditor', ['$log', '$timeout',
  function($log, $timeout) {
    return {
      restrict: 'E',
      replace: true,
      scope: {
        comment: '='
      },
      template: '<div><tab><textarea id="message" ng-model="comment.message"></textarea></tab><tab><div id="preview-message">{{comment.message}}</div></tab></div>',
      link: function(scope, elem, attrs) {
        function findChild(el, targetId) {
          var children = el.children;
          for (var i = 0; i < children.length; i++) {
            var child = children[i];
            if (child.id && child.id === targetId) {
              return child;
            }
            return findChild(child, targetId);
          }
        }

        $timeout(function() {
          scope.message = findChild(elem[0], 'message');
          $log.debug(scope.message.offsetWidth);
          resize();
        });

        //get preview element
        var previewElement = angular.element(document.querySelector('#preview-message'));

        function resize() {
          var dim = {
            width: scope.message.offsetWidth + "px",
            height: scope.message.offsetHeight + "px"
          };
          $log.debug(dim);
          previewElement.css(dim)
        }

        //Add the "mousemove" event to check, perhaps you can change the event "mouseup"
        elem.on("mouseup", function() {
          resize();
        });
      }
    };
  }
])

及其模板：

<form class="obiba-comment-form" name="form" role="form" ng-submit="send()">
  <tabset>
    <ul class="nav pull-right">
      <li>
        <a href="//guides.github.com/features/mastering-markdown/" target="_blank">{{'comment.markdown-doc-link' | translate}}</a>
      </li>
    </ul>
    <tab heading="{{'comment.write' | translate}}">
      <textarea id="obiba-comment-form-message" ng-model="comment.message" class="form-control obiba-comment-form-message"></textarea>
    </tab>
    <tab heading="{{'comment.preview' | translate}}">
      <div class="obiba-comment-marked" marked="comment.message">
      </div>
    </tab>
  </tabset>
  <button ng-if="onCancel" ng-click="cancel" type="submit" class="btn btn-default obiba-comment-form-submit">
    <span>{{'cancel' | translate}}</span>
  </button>

  <button ng-disabled="!comment.message" type="submit" class="btn btn-primary obiba-comment-form-submit">
    <span>{{'comment.send' | translate}}</span>
  </button>
</form> 

谢谢。

编辑：

我以为自己找到了解决方案，但就我而言，无法设置标记元素的高度。在简单的测试中，我曾使用ng-mouseup将标记的高度设置为消息的高度。在我的指令中，同一代码永远不会返回正确的高度（未定义）或offsetHeight（0）。因此，普遍的问题是，到底我们如何在纯AngularJS中修改DOM元素？我阅读了大多数文档，没有计时器等找不到改变元素高度的下降方式。

好吧，如果您查看了Github评论部分，并且知道如何在Anhgular中执行相同的操作，请分享该方法。

编辑2：

这是我发现的糟糕解决方案：

.directive('obibaCommentEditor', ['$log', '$timeout',
  function($log, $timeout) {
    return {
      restrict: 'E',
      replace: true,
      scope: {
        comment: '='
      },
      template: '<div><tab><textarea id="message" ng-model="comment.message"></textarea></tab><tab><div id="preview-message">{{comment.message}}</div></tab></div>',
      link: function(scope, elem, attrs) {
        function findChild(el, targetId) {
          var children = el.children;
          for (var i = 0; i < children.length; i++) {
            var child = children[i];
            if (child.id && child.id === targetId) {
              return child;
            }
            return findChild(child, targetId);
          }
        }

        $timeout(function() {
          scope.message = findChild(elem[0], 'message');
          $log.debug(scope.message.offsetWidth);
        });

        //get preview element
        var previewElement = angular.element(document.querySelector('#preview-message'));

        function resize() {
          var dim = {
            width: scope.message.offsetWidth + "px",
            height: scope.message.offsetHeight + "px"
          };
          $log.debug(dim);
          previewElement.css(dim)
        }

        //Add the "mousemove" event to check, perhaps you can change the event "mouseup"
        elem.on("mouseup", function() {
          resize();
        });

        resize();
      }
    };
  }
])

请注意，该代码基于https://stackoverflow.com/users/1074519/wzvang提供的代码

干杯。