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
};
}]);
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();
<body ng-controller="yourController"><div id="someElem"></div></body> - the div with ID someElem is within the scope, so you can do: angular.element("someElem").scope() - see the guide for more: docs.angularjs.org/api/ng/function/angular.elementng-controller attribute. will the same rule apply when using ng-view?.when("/add", { controller: "AddCtrl", templateUrl: "views/add.html" })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.
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();
});
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.
