javascript - Angular 元素记录不正确的值

Question

我正在使用 bootstrap 和 angular 聊天。每条消息都显示在其 div 中，带有“well well-sm”类。 这就是负责的代码的样子:

<div ng-repeat="message in messages" class="media" >
     <h5 class="media-heading"><span>{{message.nick}}</span> {{message.time | date: "yyyy.MM.dd HH:mm"}}</h5>
     <div change-well-height class="well well-sm">{{message.body}}   
     </div>
</div>

但是如果它的长度太大，我们会得到这个: How ordinary and long messages look like

所以我决定添加一个指令 change-well-height 来查看 scrollWidth 是否大于 clientWidth，如果是则改变高度。 指令代码:

(function() {
  'use strict';

  app.directive('changeWellHeight', [
    '$location', function($location) {
      return {
        restrict: "A",
        link: function(scope, element, attr) {
          $( document ).ready(function(){
            console.log(element);
            console.log(element['0'].scrollHeight, element['0'].clientHeight, 'Height');
            console.log(element['0'].scrollWidth, element['0'].clientWidth, 'Width');
            if (element['0'].scrollHeight > element['0'].clientHeight || element['0'].scrollWidth > element['0'].clientWidth){
              //do stuff
            }
          });
        }
      };
    }
  ]);

}).call(this);

现在的问题 当我第一次查看注销的整个元素时，我看到，在 Chrome 和 FF 中的许多属性中: 客户宽度:467， 滚动宽度:2347

但接下来的 console.log 显示: 435 435“宽度”

同一个对象怎么可能给我不同的值？我不知道如何解决这个问题

Answer 1

不要使用无论如何都没有值(value)的 document.ready，而是使用 $timeout 以便在您的代码运行时呈现文本:

app.directive('changeWellHeight', [
    '$location', '$timeout', function($location, $timeout) {
      return {
        restrict: "A",
        link: function(scope, element, attr) {
          $timeout(function(){
            console.log(element);
            console.log(element['0'].scrollHeight, element['0'].clientHeight, 'Height');
            console.log(element['0'].scrollWidth, element['0'].clientWidth, 'Width');
            if (element['0'].scrollHeight > element['0'].clientHeight || element['0'].scrollWidth > element['0'].clientWidth){
              //do stuff
            }
          });
        }
      };
    }
  ]);