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

Question

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

下面是我的简化指令：

    .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 将标记的高度设置为消息的高度。在我的指令中，相同的代码从不 returns 正确的高度（未定义）或 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://whosebug.com/users/1074519/wzvang

提供的代码

干杯。

Answer 1

当你点击"Preview"选项卡时，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

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

Angular JS resizing an element when a textarea resizes

html

resize

angularjs