使用jquery/JavaScript调用angularjs函数

sshcrbum  于 2023-08-02  发布在  Angular
关注(0)|答案(8)|浏览(152)

我正在尝试使用JavaScript/jQuery调用angular函数,下面是我找到的链接

我已经采取了相同的步骤,但在浏览器控制台得到错误

Uncaught TypeError: Cannot call method 'myfunction' of undefined

字符串
我创建了fiddle。如何调用myfunction函数并显示警报?有什么想法?

tcbh2hod

tcbh2hod1#

  • 您链接的问题中提供的解决方案是正确的。* 您的实现的问题是您没有正确指定元素的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

lyfkaqu1

lyfkaqu12#

您可以使用以下内容:
angular.element(domElement).scope()获取元素的当前作用域
angular.element(domElement).injector()获取当前应用注入器
angular.element(domElement).controller()以获取ng-controller示例。
希望能帮上忙

bmvo0sr5

bmvo0sr53#

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

字符串

hvvq6cgz

hvvq6cgz4#

你的活塞发射了

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

字符串
在任何东西被渲染之前。
您可以通过将其 Package 在超时中来验证这一点

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


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

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

8oomwypt

8oomwypt5#

不需要为控制器给予ID。它可以简单地称为如下

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

字符串
这里HeaderCtrl是JS中定义的控制器名称

fhg3lkii

fhg3lkii6#

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

字符串

au9on6nz

au9on6nz7#

试试这个:

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

字符串

7cjasjjr

7cjasjjr8#

有一种简单的方法可以做到这一点,通过在您的范围内创建一个隐藏的元素(使用ID或css类,由您决定),并通过JavaScript找到元素并触发单击。

隐藏div示例:

<div class="whatever-class-you-want" id="whatever-unique-id" ng-click="callAngularFunctionThatYouWant()">
</div>

字符串

调用您的作用域函数:

document.getElementsByClassName('whatever-class-you-want')[0].click();


或者是

document.getElementById('whatever-unique-id').click();

相关问题