Download to read offline
![Example index.html <!DOCTYPE html> <html> <head> <title>How to call $scope functionfrom console</title> <link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script> var app = angular.module("myApp",[]); app.controller("MyDemoController",function($scope) { $scope.message = "How to call $scope functionfrom console"; $scope.showHello= function() { alert("HelloAngular"); } $scope.sum= function(value1,value2) { return value1 + value2; } }); functionJsTest() { alert("JsHello"); } $(document).ready(function() { $.fn.JQueryTest= function() { alert("JQueryHello"); }; }); </script> </head> <body> <div ng-app="myApp" ng-controller="MyDemoController" id="myDiv"> <div id="msg">](https://image.slidesharecdn.com/howtocallscopefunctionfromconsole-151106171452-lva1-app6891/75/How-to-call-scope-function-from-console-3-2048.jpg)
Uploaded bycodeandyou forums
How to call $scope function from console
This document discusses how to call JavaScript, JQuery, and Angular $scope functions from the browser console. It provides an example Angular application with different functions and demonstrates calling each from the console. To call a JavaScript function, enter its name directly. To call a JQuery function, use $().functionName(). To call an Angular $scope function, use angular.element(element).scope().functionName(), where element is the DOM element with the ng-controller.
How to call $scope function from console
- 1. How to callJavaScript, JQuery, Angular $scope function from Console
- 2. Whenwe are usingAngularJsforclientsidedevelopment.We are not able tocall any$scope function directlyfromconsole likewe cancall any functionin Javascriptand in jQuery. But some time it’sverynecessaryto call Angular$scope functionforTesting purpose.So,TodayIam goingto demonstrate some easytrickstocall AngularJs$scope functionfromconsole. Followingwe have one example of simple AngularJsPage.Havingone JavaScript,One JQueryandTwo AngularJs$scope function Java Script Function– JsTest() JQuery Function– JQueryTest() AngularJs Function- $scope.showHello() $scope.sum() Nowwe will call all functionfromconsole forthis open followingprogram inGoogle Chrome.Andright clickanywhere in webpage andselect “Inspectelement”. It will showyouscreenlike this.
- 3. Example index.html <!DOCTYPE html> <html> <head> <title>How tocall $scope functionfrom console</title> <link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script> var app = angular.module("myApp",[]); app.controller("MyDemoController",function($scope) { $scope.message = "How to call $scope functionfrom console"; $scope.showHello= function() { alert("HelloAngular"); } $scope.sum= function(value1,value2) { return value1 + value2; } }); functionJsTest() { alert("JsHello"); } $(document).ready(function() { $.fn.JQueryTest= function() { alert("JQueryHello"); }; }); </script> </head> <body> <div ng-app="myApp" ng-controller="MyDemoController" id="myDiv"> <div id="msg">
- 4. {{message}} <br /> </div> <br> <button ng-click="showHello()">ShowHello</button> </div> </body> </html> --------------------------------------------------------------------------------------------------------------------- Nowgointo“console” andfollowfollowingsteps CallJava Scriptfunctionfrom console For call Java Scriptfunctionfromconsole we justneed write “JsTest()”intoconsole. Like this Output:
- 5. Call JQueryfunctionfrom console Forcall JQuery Functionfrom console use JQueryfunctionlike this “$().JQueryTest()”.Like this Output: Call AngularJs $scope function from Console Nowcall two AngularJs$Scope functionfromconsole. Forcall AngularJs functions use following command intoconsole: Syntax angular.element(document.querySelector('#someID')).scope().someFunction(); #someID – Can be anyelement’sIDwhichexistsinside ng-controller.Butit’sbettertouse idof element where use using ng-controller.Like we are usingmyDiv’sID. angular.element(document.querySelector('#myDiv')).scope().showHello(); It will showyou“AlertBox”havingmessage “Hello AngularJs”Like this
- 6. We have another$scopefunctioncalled“Sum”,Now we will call thisusingfollowingcommand angular.element(document.querySelector('#myDiv')).scope().sum(100,100); It will returnyou“200” intoconsole.Like this You alsohave optionto assignoutputtoa variable like we assignedoutputinto Sumvariable .
- 7. Thanks www.codeandyou.com http://www.codeandyou.com/2015/11/How-to-call- Angular-scope-function-from-Console.html Keywords – Howto call JavaScript Function from console, How to call JQuery Function from console, How to call Angular $Scope Function from console