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?
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');
}
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
Another way is to create functions in global scope. This was necessary for me since it wasn't possible in Angular 1.5 to reach a component's scope.
Example:
angular.module("app", []).component("component", { controller: ["$window", function($window) { var self = this; self.logg = function() { console.log("logging!"); }; $window.angularControllerLogg = self.logg; } }); window.angularControllerLogg();
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">
One doesn't need to give id for the controller. It can simply called as following
angular.element(document.querySelector('[ng-controller="HeaderCtrl"]')).scope().myFunc()
Here HeaderCtrl is the controller name defined in your JS
Please check this answer
// In angularJS script
$scope.foo = function() {
console.log('test');
};
$window.angFoo = function() {
$scope.foo();
$scope.$apply();
};
// In jQuery
if (window.angFoo) {
window.angFoo();
}
Try this:
const scope = angular.element(document.getElementById('YourElementId')).scope();
scope.$apply(function(){
scope.myfunction('test');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.