hlh3406 hlh3406 - 1 year ago 49
AngularJS Question

Angular calling a function from jquery/javascript - property undefined error

I'm trying to call an angular controller from my JavaScript. This is the first time I've used Angular for anything and I'm getting a bit lost!

I've followed this example:


But I'm getting this error:

Uncaught TypeError: Cannot read property 'TestAngularMethod' of

Initially I had my own code in there, but I've stripped it all out to try and get this example to work first, but I'm not having any luck.

Can anyone see where I'm going wrong?


<div class="continueClass" id="divID" runat="server" ng-controller="TestController" ng-if="payment.type == 'PayPal' || payment.type == 'WorldPay'">
<asp:Button runat="server" Text="Continue" OnClick="Continue_Click"/>


var myApp = angular.module('myApp', []);

myApp.controller('TestController', ["$scope", function ($scope) {
$scope.TestAngularMethod = function () {
alert('Hello you are calling angular js method.');



I've looked at these without any luck at figuring out my own issue:

Call angularjs function using jquery/javascript

AngularJS. How to call controller function from outside of controller component

Call Angular Function with Jquery


Answer Source

Despite @Fissio is right ... you can try this code:



var scope = angular.element('[id=divID]').scope();

if(scope ){ //check whether the div exist
    scope.TestController.TestAngularMethod(); //should execute your method
    /* code if scope doesn't exist, div, probably removed because
    payment.type == 'PayPal' || payment.type == 'WorldPay' is probably false /*
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download