Accessing an Angular.JS controller's name property in JavaScript (why is it the module's name?)

Question

I have some simple Angular.js code that I do not understand.

HTML:

<div ng-controller="MyCtrl">
  Hello, {{name}}!
</div>

JavaScript:

var myApp = angular.module('myApp',[]);

var controller = myApp.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.name = 'Superhero';
}]);

alert(controller.name);

The HTML directive produces what I would expect: "Hello, Superhero!" is rendered to the page. But the alert box is perplexing. I would expect it to show the string "Superhero", or perhaps the controller's name "MyCtrl", but what it actually shows is the module's name "MyApp". Why? What would I need to pass to alert to show the name assigned to the controller's scope (i.e. "Superhero") or the name of the controller itself (i.e. "MyCtrl")?

(N.B. I did try the documentation but it didn't help me untangle why the controller is reporting the module's name instead of its own.)

myApp.controller() returns the module so you can chain registration together — Mark Coleman
– Mark Coleman, Commented Dec 11, 2014 at 15:25
That makes sense of what's happening. How do I programmatically access the controller I just created? Plus where is the documentation foe myApp.controller()? The documentation I was looking at suggests it returns the controller, but that's probably the wrong page — dumbledad
– dumbledad, Commented Dec 11, 2014 at 15:28

Ben Diamant · Accepted Answer · 2014-12-11 15:29:40Z

1

You want to access angular's code from a legacy code.

the way I do it is with angular.element:

<div id="myDiv" ng-controller="MyCtrl">
  Hello, {{name}}!
</div>   

var theScope = angular.element(getElementById('myDiv')).scope();
alert(theScope.name);

answered Dec 11, 2014 at 15:29

Ben Diamant

6,2164 gold badges39 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

dumbledad Over a year ago

So in my code the way to get the controller I just created is to search the DOM for it? That'll work (thanks) but seems odd.

Ben Diamant Over a year ago

It's not that odd when you think of it this way - the dom element is the only one who can really behave as you wish because the controller itself can be used among many other dom elements @dumbledad

dumbledad Over a year ago

But isn't that exactly why you might want access to the controller itself?

Ben Diamant Over a year ago

I can't really tell because I'm not sure what is you intention when accessing it from legacy code. What I do know is that a single controller can be launched multiple times and than your 'name' scope variable has multiple values. only a DOM element that initiate the CTRL has a single value for name

dumbledad Over a year ago

That helps, thanks. I'm not sure what you mean by 'legacy code' (I usually parse that as code from a previous language, project, or version). What do you mean by 'legacy code' here?

|

Collectives™ on Stack Overflow

Accessing an Angular.JS controller's name property in JavaScript (why is it the module's name?)

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related