Menu
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; }); 
924
In Angular 2.0, there will be no $scope .
scope(); $('#elementId'). scope(). $apply(); Another easy way to access a DOM element from the console (as jm mentioned) is to click on it in the 'elements' tab, and it automatically gets stored as $0 .
The $scope in an AngularJS is a built-in object, which contains application data and methods. You can create properties to a $scope object inside a controller function and assign a value or function to it. The $scope is glue between a controller and view (HTML).
Angular scopes include a variable called $parent (i.e. $scope. $parent ) that refer to the parent scope of a controller. If a controller is at the root of the application, the parent would be the root scope ( $rootScope ). Child controllers can therefore modify the parent scope since they access to it.
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'; }); }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
