当textarea调整

Question

我正在构建一个指令，用于编写和预览类似于Github评论（对话）的评论。我的指令有两个HTML元素，一个textarea和一个div（使用angular-marked）。我喜欢做的是在调整textarea大小时调整div的大小。我已经扫描了这个网站并且搜索了很多，但是没有纯粹的角度解决方案令人满意。

以下是我的指令简化：

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

感谢。

编辑：

我以为我找到了一个解决方案，但在我的情况下，没有办法设置标记元素的高度。在我的plunker简单测试中，我使用ng-mouseup将标记的高度设置为消息的高度。在我的指令中，相同的代码永远不会返回正确的高度（undefined）和offsetHeight（0）。所以一般的问题是我们如何修改纯AngularJS中的DOM元素？我阅读了大部分文档，并且在没有计时器的情况下找不到下降方式等来改变元素的高度。

好吧，如果您查看了Github评论部分，并知道如何在Anhgular中做同样的事情，请分享方法。

EDIT2：

这是我找到的治疗方案：

.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

提供的代码

干杯。

Answer 1

单击“预览”选项卡时，Github中预览的元素大小会发生变化，这里我创建了一个类似的指令：

angular.module("MyApp",[])

.directive("resizeTextarea", [function(){
    return function(scope, elem, attrs){

        //save current size of textarea
        var current = {width: elem[0].offsetWidth, height: elem[0].offsetHeight}

        //get preview element
        var previewElement = angular.element(document.querySelector(attrs.resizeTextarea));

        function resize(){
            previewElement.css({width: current.width + "px", height: current.height + "px"})
        }

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

            //detect if the textarea has not the initial size
            if(this.offsetWidth != current.width || this.offsetHeight != current.height){
                current = {width: this.offsetWidth, height: this.offsetHeight};
                resize()
            }

        });

        resize()
    }
}]);

<tab>
    <textarea resize-textarea="#preview-message" ng-model="comment.message" class="obiba-comment-form-message"></textarea>
</tab>
<tab>
    <div id="preview-message">{{comment.message}}</div>
</tab>

<强> Demo