我正在尝试使用JavaScript/jQuery调用angular函数,下面是我找到的链接
我已经采取了相同的步骤,但在浏览器控制台得到错误
Uncaught TypeError: Cannot call method 'myfunction' of undefined
字符串我创建了fiddle。如何调用myfunction函数并显示警报?有什么想法?
tcbh2hod1#
其次,你需要使用load事件来执行你的代码。当前DOM未加载,因此找不到元素,因此您得到了错误。
load
<div id="YourElementId" ng-app='MyModule' ng-controller="MyController"> Hi </div>
字符串
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
lyfkaqu12#
您可以使用以下内容:angular.element(domElement).scope()获取元素的当前作用域angular.element(domElement).injector()获取当前应用注入器angular.element(domElement).controller()以获取ng-controller示例。希望能帮上忙
angular.element(domElement).scope()
angular.element(domElement).injector()
angular.element(domElement).controller()
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();
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">
型
8oomwypt5#
不需要为控制器给予ID。它可以简单地称为如下
angular.element(document.querySelector('[ng-controller="HeaderCtrl"]')).scope().myFunc()
字符串这里HeaderCtrl是JS中定义的控制器名称
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(); }
au9on6nz7#
试试这个:
const scope = angular.element(document.getElementById('YourElementId')).scope(); scope.$apply(function(){ scope.myfunction('test'); });
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();
8条答案
按热度按时间tcbh2hod1#
其次,你需要使用
load
事件来执行你的代码。当前DOM未加载,因此找不到元素,因此您得到了错误。字符串
型
DEMO
lyfkaqu12#
您可以使用以下内容:
angular.element(domElement).scope()
获取元素的当前作用域angular.element(domElement).injector()
获取当前应用注入器angular.element(domElement).controller()
以获取ng-controller示例。希望能帮上忙
bmvo0sr53#
另一种方法是在全局范围内创建函数。这对我来说是必要的,因为在Angular 1.5中不可能达到组件的范围。
示例如下:
字符串
hvvq6cgz4#
你的活塞发射了
字符串
在任何东西被渲染之前。
您可以通过将其 Package 在超时中来验证这一点
型
你还需要添加一个ID到你的div。
型
8oomwypt5#
不需要为控制器给予ID。它可以简单地称为如下
字符串
这里HeaderCtrl是JS中定义的控制器名称
fhg3lkii6#
请检查this answer
字符串
au9on6nz7#
试试这个:
字符串
7cjasjjr8#
有一种简单的方法可以做到这一点,通过在您的范围内创建一个隐藏的元素(使用ID或css类,由您决定),并通过JavaScript找到元素并触发单击。
隐藏div示例:
字符串
调用您的作用域函数:
型
或者是
型