使用jquery / javascript调用angularjs函数

我正在尝试使用JavaScript / jQuery调用angular函数，以下是我find的链接

• 用Jquery调用Angular函数
• 从控制器组件外部呼叫控制器function

我采取了相同的步骤，但在浏览器控制台中出现错误

Uncaught TypeError: Cannot call method 'myfunction' of undefined 

我创造了小提琴 。 如何调用myfunction函数并显示警报？ 任何想法？

Answer 1

解决scheme中提供您所链接的问题是正确的。 你的实现问题是你没有正确指定元素的ID 。

其次，你需要使用load事件来执行你的代码。 目前DOM不加载，因此元素没有find，因此你得到错误。

HTML

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

JS代码

 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

Answer 2

您可以使用以下内容：

angular.element(domElement).scope()获取元素的当前作用域

angular.element(domElement).injector()获取当前的应用程序注入器

angular.element(domElement).controller()获取ng控制器实例的持有者。

希望这可能有帮助

Answer 3

另一种方法是在全球范围内创buildfunction。 这对我来说是必要的，因为在Angular 1.5中不可能达到组件的范围。

例：

 angular.module("app", []).component("component", { controller: ["$window", function($window) { var self = this; self.logg = function() { console.log("logging!"); }; $window.angularControllerLogg = self.logg; } }); window.angularControllerLogg(); 

Answer 4

你的抢劫者正在射击

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

在呈现任何东西之前。

您可以validation，通过在超时中包装它

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

你还需要在你的div上添加一个ID。

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