0

I have a simple angular snippet 

<div ng-app="myApp" ng-controller="myCtrl">

<input ng-model="name">

<h1>My name is {{name}}</h1>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.name   = "John Doe";
    $scope.age    = "26";
    $scope.height = "5.9";
    $scope.gender = "M";

});
</script>

As you can see I have 4 variables declared in my myCtrl controller

$scope.name   = "John Doe";
$scope.age    = "26";
$scope.height = "5.9";
$scope.gender = "M";

Is there a way to programmatically list of all the declared $scope variables of a specific angular controller?

Why am I trying to do this ?

Sometimes, when you’re deep in 1000 lines of code in an angular controller, it will be very helpful to know what are the available variables to use at that specific moment. First, the benefit would be, so we don’t re-declare something that already been declared, and second, so we don't override an existing variable unintentionally. For those 2 reasons alone, that's why I am trying to list all the available $scope variables, especially the one that I declared in on that specific page, or in a specific controller of Angular.

NOTE : I am NOT looking to list all JS scope variables, but only looking for those one that I declared in Angular

code-8
  • 54,650
  • 106
  • 352
  • 604
  • I saw that post already ... so NOT possible ? – code-8 May 16 '17 at 15:30
  • what is your purpose to get all `scope` variables? – Hadi J May 16 '17 at 15:32
  • please see this too http://stackoverflow.com/questions/13743058/how-do-i-access-the-scope-variable-in-browsers-console-using-angularjs – Hadi J May 16 '17 at 15:34
  • Technically, you can do it. You can iterate through your $scope with a for in loop. Then you would have to check if the key is not present in an empty previously created $scope – Deblaton Jean-Philippe May 16 '17 at 15:34
  • @DeblatonJean-Philippe : Can you please show it how to do it by answering - if you don't mind ? – code-8 May 16 '17 at 15:35
  • 1
    This is not a duplicate. a js scope is not the same as the angular $scope! – Deblaton Jean-Philippe May 16 '17 at 15:36
  • @Hadi : It's very useful to know what are the `available` $scope variables that we can access at a specific line of code. – code-8 May 16 '17 at 15:37
  • @DeblatonJean-Philippe : You're right ! I don't care about JS $scope. I can access them by doing `this.window` I only care about my $scope variables that I declared in side my angular controller. – code-8 May 16 '17 at 15:38
  • @ihue Look at [this plunker](https://plnkr.co/edit/edI3AQdMfTS8resnaqrl?p=preview) if it is what you want !? – JeanJacques May 16 '17 at 15:41
  • @JeanJacques : Yeah that is it ! That's what I was looking for something similar to what you suggested but also return key and value, not just value. What you did is brilliant !! – code-8 May 16 '17 at 15:43
  • @ihue Then I don't really get why you want to do that, but you can do the same as I did in this plunker. The only problem to this, it's that you have to create a reference to the scope in the scope, so if you iterate on it you will also print this reference to the scope – JeanJacques May 16 '17 at 15:47
  • Sometimes, when you’re deep in a 1000 lines of code in a controller, it will be very helpful to know what are the available variables to use. So we don’t re-declare something where it is not need, and not causing a override issue unintentionally. To me, it is good to know all the available $scope variables, especially the one that I declared in on that page, or controller via Angular. – code-8 May 16 '17 at 15:51
  • @ihue Ok. Then yes, you can do like in the plunker or you can do a `console.log($scope);` in your controller. Does it answer your question ? – JeanJacques May 16 '17 at 15:57
  • I believed `console.log($scope);` is the answer that I am looking for. I wish I can do this `console.log($scope);` on a specific controller of my angular. – code-8 May 16 '17 at 16:05

1 Answers1

1

I know exactly what you need and I use this lib extensively to show me my objects like Chrome does. Angular json formatter And the beauty is that it updates instantly with Angular magic. So you know the current state of your object at all times! Simply drop this directive in your html and assign $scope to it.

Community
  • 1
  • 1
johan
  • 998
  • 6
  • 20