Angular Get Controller from Element

Is there a way to find the controller for an element through Chrome's console? I can get a reference to the component by selecting the element in the Elements Panel and using

var c = angular.element($0); 

c has a controller property (looks like a constructor), but I'm not sure what to do with this. Is there any way to find the controller's name from here?

5 Answers

If you do angular.element($0).scope() or just $scope(if you installed Batarang Chrome extension), you should be able to get access to selected element's scope's functions and properties. This should also include any functions/attributes that a controller has exposed on the scope.

There is no way to get the controller's name, though.

Assuming you're not using anonymous functions for a controller you can use something like this:

angular.element(element).controller().constructor.name 

codepen -

At least as of Angular 1.2.27, per their documentation you can do this. Look under the JQLite Extras Method section -

This works with Angular 1.5's components

Assuming you have a component named ProductViewComponent which is handled by ProductViewController, then getting the controller is easy:

angular.element("product-view").controller("productView") 

Remarks:

• Note lower case letters and dash in element name
• and lower case and no "Controller" suffix in controller text

Examples

Now you can play with it, for instance invoke methods:

angular.element("product-view").controller("productView").hasProducts(); 

Or invoke actions!

angular.element("product-view").controller("productView").products = [ 'abc' ] angular.element("product-view").scope().$apply() 

As @jusopi already pointed out you can use the jqLite extra methods angular.element(element).controller(componentName):

[It] retrieves the controller of the current element or its parent. By default retrieves controller associated with the ngController directive. If name is provided as camelCase directive name, then the controller for this directive will be retrieved

If you provide a directive/component name in camelCase you can also get specific controllers of all directives/components in the selected element:

angular.element($0).controller('MyComponent')

($0 refers to the the most recent selection in the elements inspector)

If you are just looking to find out what the controller is (and not use it in your code, maybe just the console):

run angular.element(element).controller().constructor

in the console, and if the function is named, you should be able to see the name. (as mentioned by @jusopi)

even if it's not, though, if you're in the chrome devtools (probably other tools too), you can right click on the returned nameless function and

select "Show Function Definition" in the right-click menu

which will take you to the place in the source code where it's defined, and from the context there, you can figure out what controller it is, what functions are defined within it, etc.