AngularJS accéder à portée depuis l’extérieur fonction js

Question

Je suis en train de voir si il existe un moyen simple d'accéder à l'intérieur de la portée d'un contrôleur par l'intermédiaire d'une fonction javascript (complètement hors de propos pour le contrôleur cible)

J'ai vu sur un couple d'autres questions que

angular.element("#scope").scope();

permettrait de récupérer le champ d'application à partir d'un élément du DOM, mais mes tentatives sont actuellement en produisant pas de bon résultats.

Voici le jsfiddle: http://jsfiddle.net/sXkjc/5/

Je suis en train de passer par une transition de la plaine JS Angulaire. La principale raison pour laquelle je suis en train d'y parvenir est de conserver l'original de mes bibliothèque de code intact que possible, l'enregistrement de la nécessité pour moi d'ajouter chaque fonction pour le contrôleur.

Des idées sur comment je pourrais parvenir à cela? Commentaires sur le dessus de violon sont également les bienvenus.

Answer 1

Vous devez utiliser $scope.$apply() si vous voulez apporter des modifications à une valeur de champ d’échappant au contrôle d’angularjs comme un gestionnaire d’événements jquery/javascript.

Démo : violon

Answer 2

Il a été un moment depuis que j'ai posté cette question, mais en considérant les points de vue cela semble toujours d'obtenir, voici une autre solution je suis venu sur au cours de ces derniers mois:

$scope.safeApply = function( fn ) {
    var phase = this.$root.$$phase;
    if(phase == '$apply' || phase == '$digest') {
        if(fn) {
            fn();
        }
    } else {
        this.$apply(fn);
    }
};

Le code ci-dessus, fondamentalement, crée une fonction appelée safeApply que calles l' $apply de la fonction (comme indiqué dans Arun réponse) si et seulement Angulaire actuellement n'est pas en passant par l' $digest stade. D'autre part, si Angulaire est actuellement à digérer les choses, il suffit d'exécuter la fonction comme il est, dès que ce sera suffisant pour signal Angulaire de faire les changements.

De nombreuses erreurs se produisent lors de l'utilisation de l' $apply de la fonction tandis que AngularJs est actuellement en $digest stade. L' safeApply code ci-dessus est d'un coffre-fort wrapper pour éviter de telles erreurs.

(note: personnellement, j'aime chuck en safeApply en fonction de l' $rootScope pour des fins de commodité)

Exemple:

function change() {
    alert("a");
    var scope = angular.element($("#outer")).scope();
    scope.safeApply(function(){
        scope.msg = 'Superhero';
    })
}

Démo: http://jsfiddle.net/sXkjc/227/

Answer 3

nous pouvons l'appeler après chargé

http://jsfiddle.net/gentletech/s3qtv/3/

 <div id="wrap" ng-controller="Ctrl">
    {{message}}<br>
    {{info}}
    </div>
    <a  onClick="hi()">click me </a>

    function Ctrl($scope) {
        $scope.message = "hi robi";
        $scope.updateMessage = function(_s){
            $scope.message = _s;    
        };
    }

function hi(){
    var scope = angular.element(document.getElementById("wrap")).scope();
        scope.$apply(function() {
        scope.info = "nami";
        scope.updateMessage("i am new fans like nami");
    });
}
 

Answer 4

Cela fait longtemps que je n'ai pas posé cette question, mais voici une réponse qui n'exige pas jQuery:

 function change() {
    var scope = angular.element(document.querySelector('#outside')).scope();
    scope.$apply(function(){
        scope.msg = 'Superhero';
    })
}