current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 11 down vote favorite
4

I am trying to call angular function using javascript/jQuery, following are the link I found

I have taken the same steps but getting error in browser console

Uncaught TypeError: Cannot call method 'myfunction' of undefined

I have created the fiddle. How to call myfunction function and alert is displayed? Any Idea?

share|improve this question
1  
jsfiddle.net/satpalsingh/VTbNf – Satpal May 14 '14 at 7:48

3 Answers 3

up vote 23 down vote accepted

Solution provide in the questions which you linked is correct. Problem with your implementation is that You have not specified the ID of element correctly.

Secondly you need to use load event to execute your code. Currently DOM is not loaded hence element is not found thus you are getting error.

HTML

<div id="YourElementId" ng-app='MyModule' ng-controller="MyController">
    Hi
</div>

JS Code

angular.module('MyModule', [])
    .controller('MyController', function ($scope) {
    $scope.myfunction = function (data) {
        alert("---" + data);
    };
});

window.onload = function () {
    angular.element(document.getElementById('YourElementId')).scope().myfunction('test');
}

DEMO

share|improve this answer
    
I forgot to add id in fiddle, sorry for that. And you are absolutely right, problem is with my code run before DOM load. Your code works great. Thanks..,. – user1690588 May 14 '14 at 8:05
    
You are a genius! – Gocht Jul 9 at 22:56
    
How to do this if controller is the body..! I keep getting the error...! myfunction is not a function – gayan1991 Aug 8 at 9:42
up vote 4 down vote

Your plunker is firing off

angular.element(document.getElementById('MyController')).scope().myfunction('test');

Before anything is rendered.

You can verify that by wrapping it in a timeout

setTimeout(function() {
   angular.element(document.getElementById('MyController')).scope().myfunction('test');    
}, 1000);

You also need to acutally add an ID to your div.

<div ng-app='MyModule' ng-controller="MyController" id="MyController">
share|improve this answer
    
I forgot to add id in fiddle, sorry for that. And you are absolutely right, problem is with my code run before DOM load. Thanks..,. – user1690588 May 14 '14 at 8:02
up vote 8 down vote

You can use following:

angular.element(domElement).scope() to get the current scope for the element

angular.element(domElement).injector() to get the current app injector

angular.element(domElement).controller() to get a hold of the ng-controller instance.

Hope that might help

share|improve this answer
    
If I could add more than +1 for this, I would. The third one is the best one here, because I'm not using the $scope which allows me to decouple my code from angular v1. – Adam Levitt Apr 1 at 16:42
    
Nice. This led me to be able to call a method from a service/factory with the injector().get('servicename') method. – kukabuka Jul 16 at 22:52
    
angular.element(document.getElementById('yourControllerElementID')).controller(‌​).scope().get(); can we write this code to call angular controller function? – Thomas Nov 5 at 18:29

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.