Вызов функции angularjs с использованием jquery/javascript

Я пытаюсь вызвать функцию angular с помощью javascript/jQuery, следующая ссылка, которую я нашел

Я предпринял те же шаги, но получил ошибку в консоли браузера.

Uncaught TypeError: Cannot call method 'myfunction' of undefined

Я создал fiddle. Как вызывать функцию myfunction и предупреждение? Любая идея?

Ответы

Ответ 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

Ответ 2

Вы можете использовать следующее:

angular.element(domElement).scope(), чтобы получить текущую область для элемента

angular.element(domElement).injector(), чтобы получить текущий инжектор приложения

angular.element(domElement).controller(), чтобы удержать экземпляр ng-controller.

Надеюсь, что это поможет

Ответ 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

Ваш плункер стреляет

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

Прежде чем что-либо будет показано.

Вы можете проверить, что, завернув его в тайм-аут

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

Вам также необходимо добавить идентификатор в свой div.

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

Ответ 5

Не нужно давать идентификатор для контроллера. Это можно просто назвать следующим

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

Здесь HeaderCtrl - имя контроллера, определенное в вашем JS

Ответ 6

Пожалуйста, проверьте этот ответ

       // 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');
});