web-dev-qa-db-fra.com

js angulaire: accès à $ scope à partir de jQuery

Il y a plusieurs questions comme celle-ci dans stackoverflow. Je connais. J'ai essayé toutes les réponses, mais toujours pas de chance. Mon html:

    <div class="headline" id="headline-game">
        {{gameContent.headline}}
    </div>

jQuery:

    var country = $("#headline-game").scope().headline;
    alert(country);

Mais je me suis indéfini, au lieu de ma portée. Quelqu'un peut-il m'aider? Je ne veux pas changer la portée, mais y accéder.

javascriptjqueryangularjs
9
ishwr

Angular ajoute une variable globale angular à votre fenêtre. 

Donc, vous pouvez faire quelque chose comme ça:

angular.element("#headline-game").scope().gameContent.headline;
11
hjgraca

Le problème est dû à l'ordre dans lequel les plugins sont initialisés.

  1. jQuery
  2. AngularJS

Donc, accéder à scope() dans un script jQuery lors du chargement du document aura pour résultat un indéfini, car jQuery est exécuté before Angular.

La solution à ce problème consiste à laisser AngularJS exécuter jQuery une fois prêt, à l’aide de directives .

Exemple :

Manette

app.directive("myDirective", function() {
        return {
            restrict: "A",
            scope: {
                customheadline: "@"
            },
            link: function(scope, elem, attrs) {
                var country = scope.customheadline;
                alert(country);
            }
        }
    });

HTML

<div class="headline" id="headline-game" my-directive customheadline="{{ gameContent.headline }}">
    {{gameContent.headline}}
</div>
2
Jimmy

Essaye ça

var country = $("#headline-game").scope().gameContent.headline;
alert(country);
0
Jay Shukla

Supposons que la valeur du modèle renvoie une demande $ http.

Dans le contrôleur, vous avez 3 fonctions:

function getGameContentSuccessCallback(){
   doSuccessCallback();
}

function getGameContentErrorCallback(){
  doSth()
}

function getGameContent(){
  GameContentService.GetGameContent(submitData,getGameContentSuccessCallback,getGameContentErrorCallback)

}

alors vous définissez doSuccessCallback dans jQuery

var doSuccessCallback = function(){   
   var country  = angular.element("#headline-game").scope().gameContent.headline;   
   alert(country );   
}
0
hieuvt