Angular in console: get created area (not whole area)
I know if I do
angular.element(document.querySelector('<selector-name>')).scope()
I can get the scope. But this gives me everything ($$ childTail, $$ childHead, etc.).
Is there a method that only gives me the $ scope elements (variables and functions) that I have created on my controller?
source to share
One option that as far as I can tell provides almost exactly these properties is to distinguish between the region you received (through angular.element(/*...*/).scope()
) and this region prototype.
Here's an example function that does this:
function getAssignedScopeProperties(targetScope){
var targetProto = Object.getPrototypeOf(targetScope);
var assignedProperties = {};
for (var prop in targetScope) {
if (targetScope.hasOwnProperty(prop) && typeof targetProto[prop] === "undefined") {
assignedProperties[prop] = targetScope[prop];
}
}
return assignedProperties;
}
And then using a function:
var targetElement = angular.element(document.querySelector('<selector-name>'));
var targetProps = getAssignedScopeProperties(targetElement.scope());
Unfortunately in Angular 1.3.15 this is similar to a property $$watchersCount
. This does not happen in versions 1.3.14 or 1.3.16, so this is probably a bug in AngularJS for version 1.3.15.
However, protection against $$watchersCount
(or blacklisting with it) for protection against versions of Angular with such errors does not suit me. Another option to ensure that this does not happen is to include a check for prop.charAt(0) !== "$"
in the inner-if, but assuming the goal is to keep all the values assigned in the controller, removing whatever is defined by the controller, starting with $
, unconditionally would be wrong (of course whoever built the controller by assigning properties starting with $
is wrong too, but that's neither here nor there).
source to share
An older question with an unacceptable answer is here .
Short answer: no, angular does not provide a method to get only user created properties. Also, it is difficult to copy or even convert the $ scope object to JSON.
A slightly longer answer: You can create a custom JSON.stringify function to parse the $ scope object.
var cleanScope = function(scope, includeFunctions) {
// custom JSON.stringify function
// borrowed from: /questions/1548812/how-to-get-plain-object-from-scope-in-angularjs
function scopeStringify(key, value) {
// ignore any key start with '$',
// and also ignore 'this' key to avoid a circular reference issue.
if (typeof key === 'string' && (key.charAt(0) === '$' || key === 'this')) {
return undefined;
}
// by default, JSON.stringify will ignore keys with a function as a value
// pass true as the second param to get back 'function' instead of ignoring
return includeFunctions && typeof value === 'function' ? 'function' : value;
}
return angular.fromJson(JSON.stringify(scope, scopeStringify));
};
// call like so:
console.log('clean $scope: ', cleanScope($scope));
// or pass true as the second param to include functions
console.log('clean $scope: ', cleanScope($scope, true));
source to share