使用 jquery/javascript 调用 angularjs 函数

Posted 2023-02-19

【中文标题】使用 jquery/javascript 调用 angularjs 函数

【英文标题】：Call angularjs function using jquery/javascript

【发布时间】：2014-07-02 03:25:44

【问题描述】：

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

Call Angular Function with Jquery Call controller function from outside of controller component

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

Uncaught TypeError: Cannot call method 'myfunction' of undefined

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

【问题讨论】：

jsfiddle.net/satpalsingh/VTbNf

【参考方案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');
);