Call Angular $scope functions from console
•Download as DOCX, PDF•
0 likes•2,032 views
How to call $scope function from console
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Call Angular $scope functions from console
Similar to Call Angular $scope functions from console (20)
More from codeandyou forums
More from codeandyou forums (17)
Recently uploaded
Recently uploaded (20)
Call Angular $scope functions from console
- 1. How to call JavaScript, JQuery, Angular $scope function from Console
- 2. Whenwe are usingAngularJsforclientside development.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 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">
- 4. {{message}} <br /> </div> <br> <button ng-click="showHello()">ShowHello</button> </div> </body> </html> --------------------------------------------------------------------------------------------------------------------- Nowgo into“console” andfollowfollowingsteps CallJava Scriptfunctionfrom console For call Java Scriptfunctionfromconsole we justneed write “JsTest()”intoconsole. Like this Output:
- 5. Call JQueryfunctionfrom console For call 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$scope functioncalled“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 – How to call JavaScript Function from console, How to call JQuery Function from console, How to call Angular $Scope Function from console