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
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).
Related
I would like to understand a certain behavior of AngularJS when it comes to watching changes of objects provided by a factory.
There is a different behavior depending on whether I read a property of a factory-provided object in the controller or in the html.
Compare the following 2 ways of displaying the property in the view:
app.controller("testController", function($scope, testFactory){
$scope.test_obj = testFactory.read();
$scope.test_prop = testFactory.read().prop;
});
<div>{{test_obj.prop}}</div>
<div>{{test_prop}}</div>
When the property changes in the testFactory, the change is updated in the view only in the first case, when the whole object is declared to scope and the property is called in the view. When the property is directly declared to the scope, it doesn't update automatically in the view.
This behavior can be observed in the following jsfiddle: https://jsfiddle.net/fb86p4fm/
What's the reason for this behavior?
$scope.test_prop = testFactory.read().prop;
In the above line, the initial value of prop is 0. In javascript, numbers are copied by value, but objects/arrays are by reference. $scope.test_obj is referencing the service object, while $scope.test_prop is not.
I would say that $scope.test_obj is a reference to the factory's obj while $scope.test_prop is a copied value of obj.prop.
If you add the following to your example :
console.log(testFactory.read()); // output : Object {prop: 0}
console.log(testFactory.read().prop); // output 0
You'd see that the read method would return an object and the read().prop would return a value.
I'm have having some trouble accessing a value from the parent scope, and what appears to be some strange behaviour also.
If I log $scope.$parent to the console and inspect the DOM object there is a property topicDiscovery.name. However, when I try to log this ($scope.$parent.topicDiscovery.name) it returns undefined.
Also, when I try to log the topicDiscovery object it returns an empty array, even though when its not empty in the DOM for $scope.$parent.
Why is this?
This means $scope.$parent.topicDiscovery is getting changed after console.log. Google chrome doesnot print all json object when you do console.log. It just refer to current Object. Try using JSON.stringify($scope.$parent), Here you will not get this property as stringify converts that JS object to string and there will not be any memory linking between orignal object and string.
Here is best example.
var d={z:{b:{}}};
console.log(d); //When you check here, d.a_1 is available
console.log("d.a_1",d.a); //Here d.a_1 is not available.
//Here I am adding d.a_1 property
for(var i=0;i<10;i++){
d['a_'+i]=i;
}
I have a Javascript object that gets initialised in an asynchronous manner, later edited and then stored in an array until it can be saved. The problem is that one of the checks it goes through is _.has(obj, 'Id'). This test always fails. I've used JSON.stringify() to log the object's internals and everything has its value and looks correct. When I run a simple test of this line with hard-coded values in plunker, everything works as expected. I've tried accessing the Id values through obj.Id and obj['Id'] but these both return undefined and I don't know why. Why can stringify read the property but a regular accessor can't? The Id is a value that is not touched between initialisation and saving of the object.
I updated a property of Controller and attempted to use it in a console.log(). In the HTML page I see the updated value of the property, but console.log() still shows me the old value. What did I do wrong? How to get the new value in console.log()?
Details are in http://emberjs.jsbin.com/AHiVeGe/3/edit
First, you have to use 'get' on a property. Instead of:
console.log(this.controllerFor('index').latitude);
write
console.log(this.controllerFor('index').get('latitude'));
Second, navigator.geolocation.getCurrentPosition runs asynchronously and returns immediately, so your console.log is running before latitude is set, but after it returns.
Third, the model hook runs before the controller is set up.
Fourth, the model has to be an object.
I wasn't quite sure what you wanted to do, but in http://emberjs.jsbin.com/AHiVeGe/6/edit I change a property on the model after the latitude is set and console.log it.
Can anyone please explain why this code behaves so weird under Google Chrome:
<script>
console.log({someproperty:'hello'}) ;
Object.prototype.get = function(){} ;
</script>
The content of the object printed in the console has no "someproperty", instead it has a "get someproperty" which is a function.
I'm using Chrome 21.0.
Is this expected? Is it a bug?
I can't explain to you why setting Object.prototype.get to something different causes such odd behavior, except that that function is almost certainly what Chrome/Webkit is using behind the scenes to generate its fancy object logging.
I can tell you that the reason it's happening even though you're setting .get after the console.log is that Chrome/Webkit doesn't retrieve the object until you actually click the arrow in the console to expand the object. You can test this by running this jsfiddle: http://jsfiddle.net/BNjWZ/
Notice that if you click the arrow to expand the object right away, the object will look normal, but if you wait three seconds for the .get = function(){}; to be called, it will have the 'get's.
I'm seeing this behavior (both the odd 'get' in the object display and the delayed object logging) in 22.0.1229.79
It is not expected.
There is no restriction in the spec as to the name of a property. So 'get' is a legal name for a property of an object, and the prototype object, for that matter.
It seems to be a bug in the global dir() function of the console.
Addition: JQuery has a problem with 'get' and 'set' properties.