Alter scope via Console
angular.element() is your friendApril 11, 2015
Yesterday I was tasked with changing some verbiage inside of an AngularJs application that is only displayed under a certain condition via ngIf. How can I validate the changes to the application without mucking up the boolean logic to display the div?
Given the following
Welcome new user to the site.
$scope.isNewUser = false; //some complex logic
I want to view the welcome message without touching the
isNewUser condition. Granted I could register a new user to cause this logic to evaluate to true but I am lazy.
You can interact with your angular application via the console using
var elm = document.getElementById("main"); angular.element(elm);
This allows you to access the scope
console.log(angular.element(elm).scope().isNewUser); >> false
From there you can simply set the scope property to true and force a digest cycle with apply
angular.element(elm).scope().isNewUser = true; angular.element(elm).scope().$apply();
Inside of your application you should see the
ngIf evaluate and the welcome message will be shown.
Simple but effective.
You can try it out for yourself on jsfiddle.
to access the frame in chrome change the console target to fiddle.jshell.net
Cover image credit: http://facebook.com/RodrigoMoraesPhotography