Ángulo de acceso AngularJS desde fuera de la función js

Estoy tratando de ver si hay una manera simple de acceder al alcance interno de un controlador a través de una función externa de JavaScript (completamente irrelevante para el controlador de destino)

He visto en un par de otras preguntas aquí que

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

recuperaría el alcance de un elemento DOM, pero mis intentos actualmente no están dando resultados adecuados.

Aquí está el jsfiddle: http://jsfiddle.net/sXkjc/5/

Actualmente estoy pasando por una transición de JS simple a Angular. La razón principal por la que estoy tratando de lograr esto es mantener mi código de biblioteca original intacto tanto como sea posible; ahorrando la necesidad de agregar cada función al controlador.

¿Alguna idea sobre cómo podría lograr esto? Los comentarios sobre el violín anterior también son bienvenidos.

Debe usar $ scope. $ Apply () si desea realizar cambios en un valor de alcance desde fuera del control de angularjs como un controlador de eventos jquery / javascript.

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

Demostración: Fiddle

Ha pasado un tiempo desde que publiqué esta pregunta, pero teniendo en cuenta las opiniones que todavía parece tener, aquí hay otra solución que he encontrado durante estos últimos meses:

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

El código anterior básicamente crea una función llamada safeApplyque llama a la $applyfunción (como se indica en la respuesta de Arun) si y solo Angular actualmente no está pasando por la $digestetapa. Por otro lado, si Angular actualmente está digiriendo cosas, simplemente ejecutará la función tal como está, ya que eso será suficiente para indicarle a Angular que realice los cambios.

Se producen numerosos errores al intentar utilizar la $applyfunción mientras AngularJs se encuentra actualmente en su $digestetapa. El safeApplycódigo anterior es un contenedor seguro para evitar tales errores.

(nota: personalmente me gusta tirar en safeApplyfunción de $rootScopepara fines de conveniencia)

Ejemplo:

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

Demostración: http://jsfiddle.net/sXkjc/227/

Otra forma de hacerlo es:

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

podemos llamarlo después de cargar

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

Ha pasado mucho tiempo desde que hice esta pregunta, pero aquí hay una respuesta que no requiere jquery:

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

Aquí hay una solución reutilizable: 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';
    });

};

También puedes probar:

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

La respuesta aceptada es genial. Quería ver qué sucede con el alcance angular en el contexto de ng-repeat. La cuestión es que Angular creará un sub-alcance para cada elemento repetido. Al llamar a un método definido en el original $scope, que conserva su valor original (debido al cierre de JavaScript). Sin embargo, el thishace referencia al alcance / objeto de llamada. Esto funciona bien, siempre y cuando tenga claro cuándo $scopey si thisson iguales y cuándo son diferentes. hth

Aquí hay un violín que ilustra la diferencia: https://jsfiddle.net/creitzel/oxsxjcyc/

Soy novato, lo siento si es una mala práctica. Basado en la respuesta elegida, hice esta función:

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

Lo estoy usando de esta manera:

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

Por cierto, perdón por mi inglés

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

acceso al valor del alcance

suponga que programRow.StationAuxiliaryTime es una matriz de objetos

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

Necesitamos usar la función incorporada Angular Js $ apply para acceder a variables de alcance o funciones fuera de la función del controlador.

Esto se puede hacer de dos maneras :

| * | Método 1: Usar 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étodo 2: Usando init del controlador ng:

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