Portée d'accès AngularJS depuis l'extérieur de la fonction js

J'essaie de voir s'il existe un moyen simple d'accéder à la portée interne d'un contrôleur via une fonction javascript externe (totalement sans rapport avec le contrôleur cible)

J'ai vu sur quelques autres questions ici que

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

récupérerait la portée d'un élément DOM, mais mes tentatives ne donnent actuellement aucun résultat correct.

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

Je suis actuellement en train de passer de JS simple à Angular. La principale raison pour laquelle j'essaie d'y parvenir est de garder le plus possible le code de ma bibliothèque d'origine; économisant la nécessité pour moi d'ajouter chaque fonction au contrôleur.

Des idées sur la façon dont je pourrais y parvenir? Les commentaires sur le violon ci-dessus sont également les bienvenus.

Vous devez utiliser $ scope. $ Apply () si vous souhaitez apporter des modifications à une valeur de portée hors du contrôle d'angularjs, comme un gestionnaire d'événements jquery / javascript.

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

Démo: Fiddle

Cela fait un moment que j'ai posté cette question, mais compte tenu des opinions que cela semble encore obtenir, voici une autre solution que j'ai trouvée 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 crée essentiellement une fonction appelée safeApplyqui appelle la $applyfonction (comme indiqué dans la réponse d'Arun) si et seulement Angular ne passe actuellement pas par l' $digestétape. D'un autre côté, si Angular est en train de digérer les choses, il exécutera simplement la fonction telle quelle, car cela suffira à signaler à Angular d'effectuer les modifications.

De nombreuses erreurs se produisent lorsque vous essayez d'utiliser la $applyfonction alors qu'AngularJs en est actuellement à sa $digestphase. Le safeApplycode ci-dessus est un wrapper sûr pour éviter de telles erreurs.

(Remarque: personnellement, j'aime jouer en safeApplyfonction de $rootScopepour des raisons 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/

Une autre façon de faire est:

var extScope;
var app = angular.module('myApp', []);
app.controller('myController',function($scope, $http){
    extScope = $scope;
})
//below you do what you want to do with $scope as extScope
extScope.$apply(function(){
    extScope.test = 'Hello world';
})

nous pouvons l'appeler après avoir 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");
    });
}

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

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

Voici une solution réutilisable: http://jsfiddle.net/flobar/r28b0gmq/

function accessScope(node, func) {
    var scope = angular.element(document.querySelector(node)).scope();
    scope.$apply(func);
}

window.onload = function () {

    accessScope('#outer', function (scope) {
        // change any property inside the scope
        scope.name = 'John';
        scope.sname = 'Doe';
        scope.msg = 'Superhero';
    });

};

Vous pouvez également essayer:

function change() {
    var scope = angular.element( document.getElementById('outer') ).scope();
    scope.$apply(function(){
        scope.msg = 'Superhero';
    })
}

La réponse acceptée est excellente. Je voulais regarder ce qui arrive à la lunette angulaire dans le contexte de ng-repeat. Le fait est qu'Angular créera une sous-portée pour chaque élément répété. Lors de l'appel à une méthode définie sur l'original $scope, qui conserve sa valeur d'origine (en raison de la fermeture de javascript). Cependant, le thisfait référence à la portée / à l'objet appelant. Cela fonctionne bien, tant que vous savez clairement quand $scopeet thissont les mêmes et quand ils sont différents. hth

Voici un violon qui illustre la différence: https://jsfiddle.net/creitzel/oxsxjcyc/

Je suis débutant, désolé si c'est une mauvaise pratique. Sur la base de la réponse choisie, j'ai fait cette fonction:

function x_apply(selector, variable, value) {
    var scope = angular.element( $(selector) ).scope();
    scope.$apply(function(){
        scope[variable] = value;
    });
}

Je l'utilise de cette façon:

x_apply('#fileuploader', 'thereisfiles', true);

Au fait, désolé pour mon anglais

<input type="text" class="form-control timepicker2" ng-model='programRow.StationAuxiliaryTime.ST88' />

accès à la valeur de l'étendue

supposons que programRow.StationAuxiliaryTime est un tableau d'objets

 $('.timepicker2').on('click', function () 
    {
            var currentElement = $(this);

            var scopeValues = angular.element(currentElement).scope();
            var model = currentElement.attr('ng-model');
            var stationNumber = model.split('.')[2];
            var val = '';
            if (model.indexOf("StationWaterTime") > 0) {
                val = scopeValues.programRow.StationWaterTime[stationNumber];
            }
            else {
                val = scopeValues.programRow.StationAuxiliaryTime[stationNumber];
            }
            currentElement.timepicker('setTime', val);
        });

Nous devons utiliser la fonction intégrée Angular Js $ apply pour accéder aux variables de portée ou aux fonctions en dehors de la fonction de contrôleur.

Ceci peut être fait de deux façons :

| * | Méthode 1: Utilisation de l'ID:

<div id="nameNgsDivUid" ng-app="">
    <a onclick="actNgsFnc()"> Activate Angular Scope</a><br><br>
    {{ nameNgsVar }}
</div>

<script type="text/javascript">

    var nameNgsDivVar = document.getElementById('nameNgsDivUid')

    function actNgsFnc()
    {
        var scopeNgsVar = angular.element(nameNgsDivVar).scope();
        scopeNgsVar.$apply(function()
        {
            scopeNgsVar.nameNgsVar = "Tst Txt";
        })
    }

</script>

| * | Méthode 2: Utilisation de l'init de ng-controller:

<div ng-app="nameNgsApp" ng-controller="nameNgsCtl">
    <a onclick="actNgsFnc()"> Activate Angular Scope</a><br><br>
    {{ nameNgsVar }}
</div>

<script type="text/javascript">

    var scopeNgsVar;
    var nameNgsAppVar=angular.module("nameNgsApp",[])
    nameNgsAppVar.controller("nameNgsCtl",function($scope)
    {
        scopeNgsVar=$scope;
    })

    function actNgsFnc()
    {
        scopeNgsVar.$apply(function()
        {
            scopeNgsVar.nameNgsVar = "Tst Txt";
        })
    }

</script>