Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to access the angular $scope variable in browser's console?

    • 0
    • 2
    • 2
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.30k
    Comment on it

    If there is an AngularJs app running in the page, it is often hard to debug or see the current model (stored in the $scope variables). Now suppose that we have some variable name attached to the scope in the div app. Let take the example below

    var sidebar = document.getElementsById('sidebar');
    var scope = angular.element(sidebar).scope();
    Scope {$id: "00J", $$childTail: null, $$childHead: null, $$prevSibling: null, }
    

    One thing you need to remember about is if you want to fire an action on $scope from outside of AngularJS world, you need to wrap your stuff in $scope.$apply to let AngularJS know about your changes. So just need to write like below, Execute an event like using $rootScope from console would look like below: //on your web browser console

    var sidebar = document.getElementsById('sidebar');
    var scope = angular.element(sidebar).scope();
    var rootScope = scope.$root;
    scope.$apply(function() {
      rootScope.$broadcast('myEvent', {data: myData});
    });
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: