Calling Angular Controller Function from Browser Console

Question

Is it possible to call AngularJS controller function from console (Chrome Developer Tools console)?

e.g.

app.controller('AddCtrl', ['$scope', function ($scope) {



    $scope.save = function(){
        // do stuff here - call it from console
    };

}]);

score 33 · Accepted Answer · answered Apr 01 '14 at 19:57

33

Yes, you just need to use angular.element to get an element that's within the scope of your controller:

angular.element("yourElement").scope().save();

answered Apr 01 '14 at 19:57

tymeJV

103,943
14
161
157

what is "yourElement" - controller? – Iladarsda Apr 01 '14 at 19:59
1

It's an element that is within the controllers scope, so `
` - the div with ID `someElem` is within the scope, so you can do: `angular.element("someElem").scope()` - see the guide for more: http://docs.angularjs.org/api/ng/function/angular.element – tymeJV Apr 01 '14 at 20:00
hm...my body has no `ng-controller` attribute. will the same rule apply when using `ng-view`? – Iladarsda Apr 01 '14 at 20:02
Where is your controller defined? – tymeJV Apr 01 '14 at 20:04
in config, `.when("/add", { controller: "AddCtrl", templateUrl: "views/add.html" })` – Iladarsda Apr 01 '14 at 20:07
Hmm..not sure, try targeting an element within that view. – tymeJV Apr 01 '14 at 20:07
angular.element(document.querySelector('#id')) – Iladarsda Apr 01 '14 at 20:12
You could also wrap that in a function and call the function, but either way this answer is correct. – MBielski Apr 01 '14 at 22:19

score 25 · Answer 2 · answered Apr 02 '14 at 00:52

25

Open the browsers developer console. Inspect the element where the controller gets injected. Execute the following:

angular.element($0).scope().save()

$0 is the element you are currently selecting in the developer console elements panel.

answered Apr 02 '14 at 00:52

GonchuB

705
5
8

score 11 · Answer 3 · edited May 23 '17 at 12:17

11

If you are only using angular and NOT using jquery you can do something like angular.element(document.getElementById('yourElement')).scope().save();

If you are using BOTH angular and jquery, you can do angular.element($('#yourElement')).scope().save(); assuming the the id attribute of your element is set like this <div id=yourElement></div>

VERY IMPORTANT But as noted here if the function you are calling from the console does anything such that you wish the changes to show up in the view then you have to pass them through $apply() like this

var scope = angular.element($('#story')).scope();
scope.$apply(function(){
  scope.showNextScene();
});

edited May 23 '17 at 12:17

Community

1
1

answered Jul 18 '14 at 00:01

Sumeet Pareek

2,739
2
22
17

Thanks, the very important last part saved me! – legas Mar 12 '15 at 05:17
@legas Angular has silly quirks. Takes ages to get past them sometimes. – Sumeet Pareek Mar 12 '15 at 15:42

score 1 · Answer 4 · answered Oct 26 '15 at 17:15

1

You can load a Chrome Extension for developers called AngularJS Batarang.

It will add an AngularJS tab to the developer console.

Selecting an element in your page, if it has a $scope, it will show in the "Elements" right hand pane, under the "$scope" tab.

answered Oct 26 '15 at 17:15

Craig Gjerdingen

1,844
1
21
21

As mentioned by others If jQuery is available, angular.element is just an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or jqLite. – Craig Gjerdingen Sep 07 '16 at 15:50

score 1 · Answer 5 · answered Mar 15 '17 at 09:17

1

In the Chrome inspector click on the element which is scope related to controller where you want to execute.
Type angular.element($0).scope().nameYourFunctionInScope();
Execute

answered Mar 15 '17 at 09:17

redrom

11,502
31
157
264

Type it where ? ? – Lachezar Raychev Jul 27 '17 at 06:49
@LachezarRaychev in the console – crazyCoder Nov 01 '18 at 08:44

Calling Angular Controller Function from Browser Console

5 Answers5

Linked