使用jquery/javascript调用angularjs函数

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

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

Call Angular Function with Jquery
使用Jquery调用角函数
Call controller function from outside of controller component
从控制器组件外部调用控制器函数

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?

我创造了小提琴。如何调用myfunction函数和alert ?任何想法?

5 个解决方案

#1

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.

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

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.

其次，需要使用load事件来执行代码。目前DOM还没有加载，因此没有找到元素，因此您将会得到错误。

HTML

HTML

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

JS Code

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

演示

#2

You can use following:

您可以使用:

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

element(domElement).scope()，以获取元素的当前范围。

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

元素(domElement).injector()获取当前的app injector

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

元素(domElement).controller()获取ng-controller实例。

Hope that might help

希望可以帮助

#3

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.

另一种方法是在全局范围内创建函数。这对我来说是必要的，因为在角度为1.5的情况下不可能达到组件的范围。

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();

#4

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中添加一个ID。

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

#5

One doesn't need to give id for the controller. It can simply called as following

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

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

Here HeaderCtrl is the controller name defined in your JS

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

#1