Angular element logs incorrect value

Question

I am doing a chat, using bootstrap and angular. Every message is displayed in its div with "well well-sm" classes. That's how the code responsible for that looks like:

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

But if its length is too big, we get this: How ordinary and long messages look like

So I decided to add a directive change-well-height that looks if scrollWidth is bigger than clientWidth and changes height if so. Code of the directive:

(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 When I first look at the whole element logged out, I see, among a lot of properties both in Chrome and FF: clientWidth: 467, scrollWidth: 2347

But next console.log shows: 435 435 "Width"

How is it possible that the same object gives me different values? I have no idea how to solve this

Answer 1

Instead of using document.ready which is of no value anyway, use $timeout so that the text will be rendered when your code runs:

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

Maybe this values are becoming updated before you open the properties inside the element at console. I already have noted this on Chrome, if you update some property value of an object before open its value at console, and then open the object, you'll see the value updated, even if you console this before the update. To test, declare an array of array, console it, change the value, and then open the object, you'll see the value updated.

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

Now, to figure out why the value are changing, we need more details.