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);

NOW QUESTION 当我第一次看到退出的整个元素时，我看到Chrome和FF中的很多属性： clientWidth：467， scrollWidth：2347

但是下一个console.log显示： 435 435“宽度”

同一个对象如何为我提供不同的值？我不知道如何解决这个问题

Answer 1

使用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
            }
          });
        }
      };
    }
  ]);

Answer 2

在打开控制台元素内的属性之前，可能会更新此值。我已经在Chrome上注意到这一点，如果在控制台上打开其值之前更新对象的某些属性值，然后打开该对象，即使您在更新之前进行了控制，也会看到更新的值。要测试，声明一个数组数组，控制它，更改值，然后打开该对象，您将看到更新的值。

var array = [[0]];
console.log(array);
array[0][0] = 1;

现在，要弄清楚价值变化的原因，我们需要更多细节。

Angular元素记录的值不正确

2 个答案: