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?
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 - http://codepen.io/jusopi/pen/jWYWzv?editors=101
At least as of Angular 1.2.27, per their documentation you can do this. Look under the JQLite Extras Method section - https://docs.angularjs.org/api/ng/function/angular.element
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:
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()
element.controller() just needs to be the camelCase name of the component. Where did you find this magic piece of information? I've been searching all morning until I stumbled across this gem.
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.
