How to call angular scope function from javascript?

Question

How can i call some function in angular from javascript . I have a main controller having function which i want to invoke from javascript code. For example, in my controller file i have code like this

app.controller('mainCtrl',function($scope,$http){
     //some code
     $scope.someFunction=function(value){
        // Need value to be accessed here
     } 
});

Now my code for calling to function is in view.html file, and at bottom im including controller.js . I have simply called method like this . someFunction(value);

Read the documentation on [Angular Services](https://docs.angularjs.org/guide/services) — m.spyratos, Apr 26 '17 at 15:52
in the button add the attribute ng-click="someFunction('value')" — Darion Badlydone, Apr 26 '17 at 15:52
You should only ask practical, answerable questions based on actual problems that you face. You will get much better answers if you provide code people can use to reproduce the problem. See [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). — georgeawg, Apr 26 '17 at 17:34

score 0 · Answer 1 · answered Apr 26 '17 at 15:51

0

You will need to use some sort of directive - ng-click, ng-init, ng-change, etc. You can't access these bare functions outside the Angular scope.

answered Apr 26 '17 at 15:51

Daniel A. White

187,200
47
362
445

score 0 · Answer 2 · answered Apr 26 '17 at 15:55

You can call it from inside the controller as follow:

app.controller('mainCtrl',function($scope,$http){
     //some code
     $scope.someFunction=function(value){
        // Need value to be accessed here
     } 

     $scope.someFunction(34); 
});

If you need to call it from another controller you can pass through a an event

// In your controller
$scope.$on('myEvent', function(event, arg) {
     $scope.someFunction(arg);
});

....

// From the second controller
$scope.emit('myEvent', 34);

score 0 · Answer 3 · answered Apr 26 '17 at 16:00

You can use angular directives to call your controller from your view.

For instance if you have a button in your view you could call a function defined in your controller and added to the scope.

app.controller('mainCtrl',function($scope){
     //some code
     $scope.someFunction=function(value){
        console.log('hello ' + value);
     } 
});

Your view.html

<a ng-click="someFunction('world')">Call</a>

score 0 · Answer 4 · answered Apr 26 '17 at 16:02

You can invoke the function from within the controller.See below, the last line in controller definition is the function call. It will invoke each time whecn the controller is called.

app.controller('mainCtrl',function($scope,$http){
     //some code
     $scope.someFunction=function(value){
        // Need value to be accessed here
     } 

$scope.someFunction();
});

score -1 · Answer 5 · answered Apr 26 '17 at 15:56

From inside your HTML page you have to execute the JavaScript after the page has finished loading.

<script type="application/javascript">
     document.addEventListener("DOMContentLoaded", function(event) { 
       //do work
     });
</script>

Once you have that you need to get your Angular module using your app name.

<script type="application/javascript">
     document.addEventListener("DOMContentLoaded", function(event) { 
        var app = angular.module('myApp');
     });
</script>

Once you have the module you can execute a run operation which will allow you to inject factories, services and constants. Things like controllers, directives and components are for HTML usage only.

<script type="application/javascript">
     document.addEventListener("DOMContentLoaded", function(event) { 
        var app = angular.module('myApp');
        app.run(['myService', function(myService) {
             // do your stuff here.
        });
     });
</script>

You can now share the myService data between the HTML page and your controller by also injecting myService into your controller.

How to call angular scope function from javascript?

5 Answers5

Linked