AngularJS Call Controller Function from Javascript - Stack Overflow

admin管理员组

文章数量:1406949

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?

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?

• javascript
• angularjs
• angularjs-controller

Share Follow edited May 23, 2017 at 10:27 CommunityBot 111 silver badge asked Jan 14, 2016 at 5:47 BatutaBatuta 1,7141818 gold badges4848 silver badges6262 bronze badges 1

• 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 Commented Jan 14, 2016 at 5:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 remended 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./no-scope-soup-bind-to-controller-angularjs/

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();

本文标签： AngularJS Call Controller Function from JavascriptStack Overflow