javascript console.log displays different values on same object

Question

I'm working on an AngularJS app. When I console.log an object (the attrs parameter of directive linking function) the browser show unconsistent results for the parameter "editable" (see image). In Chrome, the property gets valued as both "zzz" and undefined (see 5th row vs 1st). In Safari the output is displayed differently, but on console.log(object) the "editable" property appears as "zzz", while on console.log(object.editable) the property is undefined.

Any hints ?

I think this issue is related to: console.log() showing contradictory values for the same object property

Answer 1

I'll guess that your HTML is something like this

<div my-directive editable="{{someScopeProperty}}"...></div>

and that you are calling console.log() in your link function. When the link function runs, interpolated attributes are not defined yet (you need to use $observe or $watch to asynchronously get the interpolated value), so you'll get undefined if you attempt to log the value. Soon after, the value gets defined, and Chrome seems to automatically update the value (which is really a reference, I think) in the console where you logged the full object (not just the individual value).