Appel angularjs fonction à l'aide de jquery/javascript

Je suis en train d'appel angulaire de la fonction à l'aide de javascript/jQuery, voici le lien que j'ai trouvé

J'ai pris les mêmes étapes, mais avoir d'erreur dans le navigateur de la console

Uncaught TypeError: Cannot call method 'myfunction' of undefined

J'ai créé la violon. Comment appeler la fonction myfunction et d'alerte est affiché? Une Idée?

InformationsquelleAutor MKB | 2014-05-14
  1. 87

    Solution dans les questions qui vous avez établi le lien est correct. Problème avec votre application est que Vous n'avez pas spécifié le ID de l'élément correctement.

    Ensuite, vous devez utiliser load événement pour l'exécution de votre code. Actuellement DOM n'est pas chargé donc l'élément n'est pas trouvé donc vous obtenez l'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ÉMO

    • J'ai oublié d'ajouter l'id de violon, désolé pour ça. Et vous avez absolument raison, le problème est avec mon code à exécuter avant DOM charge. Votre code fonctionne très bien. Merci..,.
    • Comment faire si le contrôleur est le corps..! Je reçois l'erreur...! myfunction n'est pas une fonction
    • fonctionne très bien! Merci
    InformationsquelleAutor Satpal
  2. 32

    Vous pouvez utiliser la suite:

    angular.element(domElement).scope() pour obtenir le champ d'application actuel de l'élément

    angular.element(domElement).injector() pour obtenir l'application actuelle de l'injecteur

    angular.element(domElement).controller() d'obtenir une prise de la ng-controller instance.

    Espoir qui pourrait l'aider à

    • Si je pouvais ajouter plus de +1 pour ce faire, je le ferais. Le troisième est le meilleur ici, parce que je ne suis pas en utilisant le $scope qui me permet de dissocier mon code angulaires v1.
    • Nice. Cela m'a conduit à être en mesure d'appeler une méthode d'un service/d'usine avec l'injecteur().get('service') de la méthode.
    • angular.element(document.getElementById('yourControllerElementID')).controller().scope().get(); pouvez nous écrire ce code pour appeler angulaire de la fonction de contrôleur?
    InformationsquelleAutor raman thakur
  3. 9

    Une autre façon est de créer des fonctions dans la portée globale. C'était nécessaire pour moi, car il n'était pas possible dans Angulaire de 1,5 à atteindre une composante du champ d'application.

    Exemple:

    JS:

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

    InformationsquelleAutor Carl Emmoth
  4. 8

    Votre plunker coup d'envoi de

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

    Avant que rien ne soit rendue.

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

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

    Vous devez également acutally ajouter un ID à votre div.

    <div ng-app='MyModule' ng-controller="MyController" id="MyController">
    • J'ai oublié d'ajouter l'id de violon, désolé pour ça. Et vous avez absolument raison, le problème est avec mon code à exécuter avant DOM charge. Merci..,.
    • Je n'ai pas utilisé angulaire pour quoi que ce soit pour 3 ans donc, je vous suggère d'essayer de poser une nouvelle question si il n'y a rien à ce sujet déjà. La seule option que je vois est de l'exposer par la fenêtre globale de l'objet, mais il peut y avoir de meilleures façons.
    InformationsquelleAutor ivarni
  5. 1

    On n'a pas besoin de donner l'id du contrôleur.
    Il peut simplement appelé comme suit

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

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

    InformationsquelleAutor madhu131313
  6. 0

    Veuillez 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();
        }
    InformationsquelleAutor Adeel Gill
  7. 0

    Essayez ceci:

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