Escopo de acesso AngularJS a partir da função js externa

Estou tentando ver se existe uma maneira simples de acessar o escopo interno de um controlador através de uma função javascript externa (completamente irrelevante para o controlador de destino)

Eu já vi em algumas outras perguntas aqui que

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

recuperaria o escopo de um elemento DOM, mas minhas tentativas atualmente não estão produzindo resultados adequados.

Aqui está o jsfiddle: http://jsfiddle.net/sXkjc/5/

Atualmente, estou passando por uma transição do JS simples para o Angular. A principal razão pela qual estou tentando conseguir isso é manter o código da biblioteca original intacto, tanto quanto possível; economizando a necessidade de adicionar cada função ao controlador.

Alguma idéia de como eu poderia conseguir isso? Comentários sobre o violino acima também são bem-vindos.

Você precisa usar $ scope. $ Apply () se quiser fazer alterações em um valor de escopo fora do controle de angularjs, como um manipulador de eventos jquery / javascript.

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

Demo: Fiddle

Já faz um tempo desde que eu postei essa pergunta, mas, considerando os pontos de vista que isso ainda parece ter, aqui está outra solução que encontrei durante esses últimos meses:

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

O código acima, basicamente cria uma função chamada safeApplyque calles a $applyfunção (como indicado na resposta de Arun) se e somente angular actualmente não está a atravessar o $digestpalco. Por outro lado, se o Angular estiver digerindo atualmente coisas no momento, ele executará a função como está, pois será suficiente para sinalizar ao Angular para fazer as alterações.

Inúmeros erros ocorrem ao tentar usar a $applyfunção enquanto AngularJs está atualmente em seu $digestestágio. O safeApplycódigo acima é um invólucro seguro para evitar esses erros.

(nota: eu pessoalmente gosto de participar safeApplycomo uma função de$rootScope para fins de conveniência)

Exemplo:

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

Demonstração: http://jsfiddle.net/sXkjc/227/

Outra maneira de fazer isso é:

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 chamá-lo depois de carregado

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

Já faz muito tempo desde que eu fiz essa pergunta, mas aqui está uma resposta que não requer jquery:

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

Aqui está uma solução reutilizável: 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';
    });

};

Você também pode tentar:

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

A resposta aceita é ótima. Eu queria ver o que acontece com o escopo Angular no contexto de ng-repeat. O problema é que o Angular criará um sub-escopo para cada item repetido. Ao chamar um método definido no original $scope, ele mantém seu valor original (devido ao fechamento do javascript). No entanto, thisrefere - se ao escopo / objeto de chamada. Isso funciona bem, desde que você tenha certeza de quando $scopeethis é o mesmo e quando eles são diferentes. hth

Aqui está um violino que ilustra a diferença: https://jsfiddle.net/creitzel/oxsxjcyc/

Eu sou novato, desculpe se é uma má prática. Com base na resposta escolhida, fiz esta função:

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

Estou usando desta maneira:

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

A propósito, desculpe pelo meu inglês

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

acessando o valor do escopo

suponha que programRow.StationAuxiliaryTime é uma 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);
        });

Precisamos usar a função incorporada Js angulares $ aplicar a variáveis ​​de escopo de acesso ou funções fora da função do controlador.

Isso pode ser feito de duas maneiras:

| * | Método 1: usando o 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 o init do 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>