使用 jquery/javascript 调用 angularjs 函数答案

【问题标题】：Call angularjs function using jquery/javascript使用 jquery/javascript 调用 angularjs 函数
【发布时间】：2014-07-02 03:25:44
【问题描述】：

我正在尝试使用 javascript/jQuery 调用 Angular 函数，以下是我找到的链接

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

Uncaught TypeError: Cannot call method 'myfunction' of undefined

我创建了fiddle。如何调用myfunction函数并显示alert？有什么想法吗？

【问题讨论】：

jsfiddle.net/satpalsingh/VTbNf

标签： javascript jquery angularjs

【解决方案1】：

您链接的问题中提供的解决方案是正确的。 您的实施问题是您没有正确指定元素的 ID。

其次，您需要使用load 事件来执行您的代码。当前未加载 DOM，因此未找到元素，因此您收到错误。

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

【讨论】：

我忘了在 fiddle 中添加 id，抱歉。你是绝对正确的，问题在于我的代码在 DOM 加载之前运行。您的代码效果很好。谢谢..,.
如果控制器是身体怎么办..！我不断收到错误...！ myfunction 不是函数

【解决方案2】：

您可以使用以下内容：

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

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

angular.element(domElement).controller() 获取 ng-controller 实例。

希望对你有帮助

【讨论】：

如果我可以为此添加超过 +1，我会的。第三个是这里最好的，因为我没有使用 $scope，它允许我将我的代码与 angular v1 解耦。
不错。这使我能够使用 injector().get('servicename') 方法从服务/工厂调用方法。
angular.element(document.getElementById('yourControllerElementID')).controller().scope().get();我们可以写这段代码来调用角度控制器函数吗？

【解决方案3】：

另一种方法是在全局范围内创建函数。这对我来说是必要的，因为在 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();

【讨论】：

【解决方案4】：

你的 plunker 正在启动

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

在渲染任何东西之前。

您可以通过将其包装在超时中来验证这一点

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

您还需要在 div 中添加一个 ID。

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

【讨论】：

我忘了在 fiddle 中添加 id，抱歉。你是绝对正确的，问题在于我的代码在 DOM 加载之前运行。谢谢..,.
@MdAslam 我已经有 3 年没有使用过 Angular 了，所以我建议尝试问一个新问题，如果没有关于这样做的问题。我能想到的唯一选择是通过全局窗口对象公开它，但可能有更好的方法。

【解决方案5】：

不需要为控制器提供 id。它可以简单地调用如下

angular.element(document.querySelector('[ng-controller="HeaderCtrl"]')).scope().myFunc()

这里的 HeaderCtrl 是你的 JS 中定义的控制器名称

【讨论】：

【解决方案6】：

请查看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();
}

【讨论】：

【解决方案7】：

试试这个：

const scope = angular.element(document.getElementById('YourElementId')).scope();
scope.$apply(function(){
     scope.myfunction('test');
});

【讨论】：