How to capture the $state object in console from an angular application for debugging purpose?

Question

I would like to do $state.reload() in my angular application for debugging purpose. See this related question how-do-i-reload-an-angular-partial-for-testing-purpose

However, I am not able to capture the $state in my application which doesn't even have the $rootScope object exposed? I managed to get the $rootScope by doing this as shown in how-to-access-update-rootscope-from-outside-angular

var $body = angular.element(document.body);
var $rootScope = $body.scope().$root;

And then as explained in the Wiki

var myApp = angular.module('myApp', []);
angular.module("myApp").run(function ($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
});

But this not setting anything to $rootScope.$state thought $rootScope is accessible now. Any help? I'm using Angular 1.3.x.

Edit: Even this doesn't work,

angular.module("myApp").run(function ($rootScope, $state, $stateParams) {
    console.log("Testing");
});

The last snippet obviously doesn't work because of some error. If you're getting a problem, it's always desirable to provide full error message and http://stackoverflow.com/help/mcve , otherwise problem solving becomes total guesswork. Any way, in your case `$rootScope.$state = $state` is a hack that is not necessary. It should be just `angular.element(document.body).injector().get('$state')`. — Estus Flask, Sep 29 '17 at 20:12
Ok, I don't see a traceback related to this but there is something else that is being done which fails - can't relate it to this. But it is fine. Will debug it sometime later. I can see that `run` does a `push` so it doesn't happen synchronously maybe :) — Nishant, Sep 30 '17 at 08:41

Estus Flask · Accepted Answer · 2017-09-29T20:09:30.077

4

Considering that AngularJS application was bootstrapped on body, it should be possible to get service instance with

angular.element(document.body).injector().get('$state');

There is no need to expose it to scope.

edited Sep 29 '17 at 20:09

answered Sep 29 '17 at 19:54

Estus Flask

206,104
70
425
565

Excellent. I was looking for a solution like this. Thank You. – Nishant Sep 30 '17 at 07:03

score 1 · Answer 2 · answered Sep 29 '17 at 17:28

1

For angular 1.5.x - 1.6.x

You need to install this https://github.com/olov/ng-annotate, after that your code should looks like this

angular.module("myApp").run(function ($rootScope, $state, $stateParams) {
    'ngInject'; // this will fix dependency injection
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
});

answered Sep 29 '17 at 17:28

Daniel Rosenberg

600
6
11

I am using Angular 1.3.x in this app. So nothing can't be done inside? – Nishant Sep 29 '17 at 17:31
1

You need to try, I think ngAnnotate will work with 1.3.x – Daniel Rosenberg Sep 29 '17 at 17:48
Don't we have an approach without the additional module? – Nishant Sep 29 '17 at 17:49

How to capture the $state object in console from an angular application for debugging purpose?

2 Answers2