AngularJS Call Controller Function from Javascript

Question

In Angular SPA application, you would normally have the following codes in app.js

var app = angular.module('MyApp', ['ngRoute']);

app.config(function ($routeProvider){
  $routeProvider.when("/home", {
        controller: "homeCtrl",
        templateUrl: "app/views/home.html"
    });
});

the HTML (home.html)

<form role="form" id="formHome">
  <div>
    HTML Elements Here...
  </div>
</form>

And the homeCtrl:

'use strict';
app.controller('homeCtrl', ['$scope', '$location', function($scope, $location){

  $scope.angularFn = function(obj){
    // Do Some Stuff with obj.
  }

  function myTestFunction(){
    // Call $scope.angularFn here.
    var obj = {name: 'John', team: 'Nissan'};
   $scope.angularFn(obj);
  }

}]);

The above code obviously would error out as the $scope.angularFn goes undefined.

I've read somewhere that you need to get the element ID for which the controller is being used, and call the angular function from that. i.e.:

angular.element(document.getElementById('formHome')).scope().angularFn(obj);

But checking the console.log(angular.element(document.getElementById('formHome')).scope)

seems to point to the angular.js library, instead of the controller, hence, calling the angularFn function is also undefined.

So, how would you be able to call the controller function from within the plain old JS function?

You are using angular patterns that I have never seen before. Why would you want to call a non-$scoped function and wrap a $scope method inside of it? — P Ackerman, Jan 14 '16 at 05:55

Subash · Accepted Answer · 2016-01-14T06:04:52.867

2

You can use controllerAs syntax. The convention is that you should not use $scope in your controller to assign variables and functions to template.

Javascript

var app = angular.module('MyApp', ['ngRoute']);

app.config(function ($routeProvider){
  $routeProvider.when("/home", {
        controller: "homeCtrl",
        controllerAs: 'vm', // note this is added to route
        templateUrl: "app/views/home.html"
    });
});

'use strict';
app.controller('homeCtrl', ['$location', function($location){
  // this will be equal to the controller and will be same as $scope
  // using $scope is not recommended and should be used as follows
  // quick google on why not to use scope will give you plenty of explanation
  var vm = this;

  vm.angularFn = function(obj){
    // Do Some Stuff with obj.
  }

  function myTestFunction(){
    var obj = {name: 'John', team: 'Nissan'};
    vm.angularFn(obj);
  }

}]);

Template:

Then you can access the function or variable from the controller using vm.variableName or vm.FunctionName()

<form role="form" id="formHome">
  <div ng-click="vm.angularFn(someobject)">
    HTML Elements Here...
  </div>
</form>

Why use controllerAs over $scope

http://codetunnel.io/angularjs-controller-as-or-scope/

https://toddmotto.com/no-scope-soup-bind-to-controller-angularjs/

edited Jan 14 '16 at 06:04

answered Jan 14 '16 at 05:55

Subash

7,098
7
44
70

I cannot use this as I need to explicitly call the $scope.angularFn. – Batuta Jan 14 '16 at 06:00
What do you mean by `explicitly` call `$scope.angularFn`. Once you assign function to `this`, it behaves exactly same and you dont need to use `$scope` anymore. – Subash Jan 14 '16 at 06:02
$scope.angularFn has multiple routines that utilize other angular objects injected ($location, etc.) hence, I cannot take out the function into its own defined plain js function. – Batuta Jan 14 '16 at 06:04
I think you don't get the point I am trying to explain. Its exactly same and your existing code will continue to work the same way. First try what I have suggested and reply back with the result. – Subash Jan 14 '16 at 06:06
I have a similar problem but I need the onscroll event instead like the next: `
` it didn't work though for this other case... I had to use scope and a directive instead...
– ana Oct 27 '21 at 06:07

score 1 · Answer 2 · answered Jan 14 '16 at 05:55

1

in that case scope is a function, so you need to do like this

console.log(angular.element(document.getElementById('formHome')).scope());

and

angular.element(document.getElementById('formHome')).scope().angularFn();

answered Jan 14 '16 at 05:55

sdfacre

1,273
7
7

This results in an error saying that angularFn is not a function. As I've mentioned, angular.element(document.getElementById('formHome')).scope points to angular.js and not to the controller where I could call the angularFn. – Batuta Jan 14 '16 at 06:03
not true, at least it works for me. http://plnkr.co/edit/4kVFlq9yr5iYlRfstHXH?p=preview – sdfacre Jan 14 '16 at 06:07

AngularJS Call Controller Function from Javascript

2 Answers2