web-dev-qa-db-de.com

Rufen Sie die anglejs-Funktion mit jquery/javascript auf

Ich versuche, die Winkelfunktion mit Javascript/jQuery aufzurufen. Nachfolgend den Link, den ich gefunden habe

Ich habe die gleichen Schritte unternommen, habe aber eine Fehlermeldung in der Browserkonsole erhalten

Uncaught TypeError: Cannot call method 'myfunction' of undefined

Ich habe die Geige erstellt. Wie rufe ich meine Funktionsfunktion auf und es wird eine Warnmeldung angezeigt? Irgendeine Idee?

javascriptjqueryangularjs
44
user1690588

Lösung in den Fragen, die Sie verlinkt haben, ist korrekt. Problem bei der Implementierung ist, dass Sie das ID des Elements nicht richtig angegeben haben. 

Zweitens müssen Sie das Ereignis load verwenden, um Ihren Code auszuführen. Momentan ist DOM nicht geladen, daher wurde das Element nicht gefunden, daher wird ein Fehler angezeigt.

HTML

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

JS-Code

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

85
Satpal

Sie können folgendes verwenden:

angular.element(domElement).scope(), um den aktuellen Bereich für das Element abzurufen

angular.element(domElement).injector(), um den aktuellen App-Injektor abzurufen

angular.element(domElement).controller(), um die ng-controller-Instanz zu erhalten.

Hoffe das könnte helfen

32
raman thakur

Eine andere Möglichkeit ist das Erstellen von Funktionen im globalen Bereich. Dies war für mich notwendig, da es in Angular 1.5 nicht möglich war, den Umfang einer Komponente zu erreichen.

Beispiel:

angular.module("app", []).component("component", {
  controller: ["$window", function($window) {
    var self = this;
    
    self.logg = function() {
      console.log("logging!");
    };
    
    $window.angularControllerLogg = self.logg;
  }
});
               
window.angularControllerLogg();

9
Carl Emmoth

Dein Plunker schießt ab

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

Bevor etwas gerendert wird.

Sie können dies überprüfen, indem Sie es in ein Timeout einschließen

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

Sie müssen Ihrem Div auch eine ID hinzufügen.

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

Bitte überprüfen Sie diese Antwort 

       // In angularJS script
        $scope.foo = function() {
            console.log('test');
        };
        $window.angFoo = function() {
            $scope.foo();
            $scope.$apply(); 
        };

        // In jQuery
        if (window.angFoo) {
            window.angFoo();
        }
0
Adeel Gill

Versuche dies:

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

Man muss keine ID für den Controller angeben. Es kann einfach wie folgt aufgerufen werden

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

Hier ist HeaderCtrl der Controller-Name, der in Ihrem JS definiert ist

0
madhu131313