角度元素记录不正确的值答案

【问题标题】：Angular element logs incorrect value角度元素记录不正确的值
【发布时间】：2015-10-19 11:59:38
【问题描述】：

我正在聊天，使用引导程序和角度。每条消息都以“well-sm”类显示在其 div 中。这就是负责它的代码的样子：

<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 "宽度"

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

【问题讨论】：

你会在某个时候改变这个值吗？ console.log 不会显示所有不同的值，只会显示最后一个值，至少在 chrome 中，通过日志旁边的控制台中的黄色三角形是值得注意的。
@koox00，感谢您的评论。那里没有黄色三角形。我不更改值，只需将其注销。可能是它隐含地改变了，但我没有写任何代码来改变它。此外，这很奇怪。我注销了元素的所有属性，它是正确的，在下一行我只注销了两个属性 - 其中一个不正确。我认为它没有时间改变。
link运行时文本不会被渲染，尝试使用$timeout
@charlietfl，是的，你是对的。如果你写下答案，我会投票给它。或者我可以自己写，如果你愿意的话。所以这取决于你。天啊，我早该想到这个的。真丢人。

标签： javascript angularjs twitter-bootstrap

【解决方案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
            }
          });
        }
      };
    }
  ]);

【讨论】：

【解决方案2】：

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

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

现在，要弄清楚为什么值会发生变化，我们需要更多细节。

【讨论】：