AngularJS access controller $scope from outside

Question

var theApp = angular.module('theApp', []);
var app = angular.module('theApp', ['ui.bootstrap']);
app.controller('MenuSideController', ['$scope','SnazzyService','$modal','$log', function($scope, SnazzyService, $modal, $log) {
    $scope.user.zoomlvl = '2';
}]);

I have the above controller and it sets a $scope which I can only ever access the values from inside.

But I seen somewhere that using the below I would be able to access the $scope but when I console.log($scope) the $scope.user.zoomlvl it doesn't exist.

I cannot figure out how to access the MenuSideController $scope and update that with the valZoom variable.

var appElement = document.querySelector('[ng-app=theApp]');
var $scope = angular.element(appElement).scope();
console.log($scope);
$scope.$apply(function() {
    $scope.user.zoomlvl = valZoom;
});

Seems strange you would want to do this, but if you access the scope of the module/app it is the ancestor of the scope that is created for the controller so the changes that are made in the child/descendant scope won't be visible from the parent's context. Generally speaking you should be using functions defined on the scope in the controller to modify the $scope. — shaunhusain
– shaunhusain, Commented Mar 21, 2014 at 22:09
If you're attempting to integrate with some third party library (particularly one that does any sort of DOM manipulation) you may be better off writing a directive that wraps up the third party code, this way you can write things that interact with the third-party code in your link function and have them update the scope accordingly. — shaunhusain
– shaunhusain, Commented Mar 21, 2014 at 22:11
@shaunhusain just hoping to use the the $scope from my controller in another part of the site where I am able to change the input value when its value is changed. $watch only works whne the input is keyed in but not when the value is updated by $('#zoom').val(valZoom); — ngplayground
– ngplayground, Commented Mar 21, 2014 at 22:21
True but doing this is sort of subversive to the "Angular way" of doing things since now your javascript is dependent on elements in the view and will break if you change the view. I'm just saying I think you should check out alternative approaches that angular provides instead of hacking around it, check out existing implementations of the Google maps directives to see how it's generally done and just expand on them, it's easier than starting from scratch. — shaunhusain
– shaunhusain, Commented Mar 21, 2014 at 22:25

tasseKATT · Accepted Answer · 2014-03-22 09:15:28Z

Without seeing the markup, I guess the scope of MenuSideController is a child scope to the scope you are selecting.

While it is possible to traverse down the tree like this (assuming the scope we want is the first child):

var appElement = document.querySelector('[ng-app=theApp]');
var appScope = angular.element(appElement).scope();
var controllerScope = appScope.$$childHead;
console.log(controllerScope.user);

It is simpler to just select the element where the specific controller is attached.

Assuming you are using the ng-controller directive:

<body ng-controller="MenuSideController"></body>

Do instead:

var controllerElement = document.querySelector('body');
var controllerScope = angular.element(controllerElement).scope();
console.log(controllerScope.user);

Demo: http://plnkr.co/edit/WVNDG9sgYgoWaNlrNCVC?p=preview

angular.element(document).ready(function() {

  var appElement = document.querySelector('[ng-app=theApp]');
  var appScope = angular.element(appElement).scope();

  console.log('Traversing from appScope to controllerScope:', appScope.$$childHead.user);


  var controllerElement = document.querySelector('body');
  var controllerScope = angular.element(controllerElement).scope();

  console.log('Directly from controllerScope:', controllerScope.user);


  controllerScope.$apply(function() {
    controllerScope.user.zoomlvl = '10';
  });
});

I just stumbled across this answer from Google, and there is a very important caveat to using the element to access the scope - it only works when Angular's debug data is turned on! Given that you can get a pretty significant performance boost by turning debug data off in production, I'd be somewhat wary about relying on this method.
@JoeClay Yes, you are correct. I learned this myself a while after I posted this answer but have forgotten to update it. I will edit and add an explanation when I have time. Thank you.
Thanks! I don't blame you for not having updated it, it wouldn't be reasonable to expect people to remember every single answer they'd ever done on here. Just thought I'd give a heads up :)
So what's the update? how do you access the element's scope when Angular's debug data is turned off?

Collectives™ on Stack Overflow

AngularJS access controller $scope from outside

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related