Search code examples
angularjsgoogle-chrome-devtoolsrootscope

Broadcast rootscope change

I'm trying to write a script to access the rootscope and change a variables value from the dev tools. I can get the scope and the rootscope, but my changes don't show up in my bindings. However if I use a bound input everything is fine.

Example: 

<input ng-model="mode"></input>
<span ng-bind-html="mode"></span>

update each other fine but

angular.element("body").scope().$root.mode = 'test'

Updates the controller but has no effect on the bindings. I have compared my original controller and my console controller using === and they are equal.

So from what I read I need to broadcast or emit that I've changed the scope, however I can't seem to figure out what to broadcast , or if I am broadcasting correctly.

Broadcast code attempts:

scope.$apply(function() {root.$emit('change', {mode: 1})})
scope.$apply(function() {root.$emit('stateChangeSuccess', {mode: 1})})
root.$apply(function() {root.$emit('change', {mode: 1})})
root.$apply(function() {root.$emit('stateChangeSuccess', {mode: 1})})

Additionally it should be noted that changing the input will change the span but not my copy of the root scope.

root.mode = 'console'
type 'input text' in the input
root.mode returns 'console'
Solution

  • I don't think this is possible with events (perhaps I'm wrong). There is another way to do make changes from the console though.

    The reason angular.element("body").scope().$root.mode = 'test' doesn't update your bindings is that Angular doesn't "know" that a change to the scope has been made. If you are making updates to your data model from "outside" the Angular world, you will need to wrap you changes in an $apply() function:

    var $rootScope = angular.element("body").scope().$root;
$rootScope.$apply(function() {
  $rootScope.mode = 'hi';
});

    FYI, when sending an event from the $rooteScope, you'll want to use $broadcast instead of $emit. $broadcast broadcasts an event "downward" to all descendant scopes, while $emit sends the event "upwards" to ancestor scopes. If you $emit from the $rootScope, there are no ancestor scopes to pick up the event (though perhaps the $rootScope will?).