web-dev-qa-db-fra.com

Appelle la fonction angularjs en utilisant jquery/javascript

J'essaie d'appeler la fonction angulaire à l'aide de javascript/jQuery, voici le lien que j'ai trouvé

J'ai pris les mêmes mesures mais des erreurs se sont glissées dans la console du navigateur

Uncaught TypeError: Cannot call method 'myfunction' of undefined

J'ai créé le violon . Comment appeler la fonction myfunction et l'alerte est affichée? Une idée?

javascriptjqueryangularjs
44
user1690588

La solution fournie dans les questions que vous avez liées est correcte. Le problème avec votre implémentation est que vous n'avez pas spécifié correctement le ID de l'élément. 

Deuxièmement, vous devez utiliser l'événement load pour exécuter votre code. Actuellement, le DOM n'est pas chargé, donc l'élément n'est pas trouvé, donc vous obtenez une erreur.

HTML

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

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

D&EACUTE;MO

85
Satpal

Vous pouvez utiliser ce qui suit:

angular.element(domElement).scope() pour obtenir la portée actuelle de l'élément

angular.element(domElement).injector() pour obtenir l'injecteur d'application actuel

angular.element(domElement).controller() pour obtenir l'instance de ng-controller.

J'espère que cela pourrait aider

32
raman thakur

Une autre méthode consiste à créer des fonctions dans une étendue globale. Cela était nécessaire pour moi car il n’était pas possible dans Angular 1.5 d’atteindre la portée d’un composant.

Exemple:

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

Votre plongeur se déclenche

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

Avant que rien ne soit rendu.

Vous pouvez le vérifier en l'enveloppant dans un délai d'attente

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

Vous devez également ajouter un identifiant à votre div.

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

S'il vous plaît vérifier cette réponse 

       // 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

Il n'est pas nécessaire de donner un identifiant pour le contrôleur. Il peut simplement être appelé comme suit

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

Ici HeaderCtrl est le nom du contrôleur défini dans votre JS

0
madhu131313