Call AngularJS controller from Javascript

Question

I am loading views and scripts on client side. I am trying to achieve to load and call angularjs controller inside my javascript.

Load container view(v1.html), main script (eg. myscript.js) and angular.js
myscript.js will load view(v2.html) inside v1.html and angular controller(controller.js)
v2.html is as: <div id="v1_id" ng-app="loadApp" ng-controller="loadCtrl"> {{msg}} </div>.
controller.js is as:

angular.module('loadApp', []).controller('loadCtrl', function($scope) {
  $scope.load_msg = function(_msg) {
    $scope.msg = _msg;
  }
});

Call to controller within myscript.js : angular.element(document.getElementById('v1_id')).scope().load_msg('Hi')

And error I get is Uncaught TypeError: Cannot read property 'load_msg' of undefined.

Any thought on this, what I am missing here?

Many thanks.

Why are you trying to do that? Most of the time you don't need to use element.scope(). Anyway, try to put your <div> inside the controller, and not everything at the same level, maybe that's it. — floribon
– floribon, Commented Feb 20, 2015 at 1:34
Agree with floribon, element.scope is something you use only for a quick debug session in order to inspect the scope. Using it for something else is a big code-smell. — Paulo Scardine
– Paulo Scardine, Commented Feb 20, 2015 at 1:37

floribon · Accepted Answer · 2015-02-20 01:40:51Z

1

You probably haven't wait for angular to have bootstrapped (compiled) your HTML, hence the scope is not available. Use angular.element(document).ready before running your javascript.

angular.module('loadApp', []).controller('loadCtrl', function($scope) {
  $scope.load_msg = function(_msg) {
    $scope.msg = _msg;
  }
});

// Wait for angular to be bootstraped
angular.element(document).ready(function () {
  
  var scope = angular.element(document.getElementById('v1_id')).scope();
  
  // Since we are outside of angular world, we need to $apply the scope
  scope.$apply(function() {
    scope.load_msg('Hi');
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="v1_id" ng-app="loadApp"  ng-controller="loadCtrl">
  {{msg}}
</div>

answered Feb 20, 2015 at 1:40

floribon

19.2k5 gold badges56 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nishikant Over a year ago

I am still getting : Uncaught TypeError: Cannot read property '$apply' of undefined

floribon Over a year ago

As you can see, it is working on my sample code. Could you update your question with what you are doing now?

Collectives™ on Stack Overflow

Call AngularJS controller from Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related