Escopo de acesso fora do AngularJS

Ao usar o AngularJS, é considerada a melhor prática usar as diretivas do AngularJS para modificar o DOM, não o jQuery. Usar muito o jQuery geralmente significa que você não está fazendo as coisas do “jeito AngularJS” e, portanto, é um cheiro de código. Mas e se você apenas tiver que interagir diretamente com o AngularJS usando jQuery? Veja como.

Primeiro, vamos criar um aplicativo AngularJS simples:

<script>
var app = angular.module('app', []);

app.controller('ctrl', ['$scope', function ($scope) {
    $scope.message = 'hello';
}]);    
</script>

<div ng-app="app" ng-controller="ctrl">
{{message}}
</div>

Este aplicativo AngularJS simples produzirá uma página em branco, exceto pela palavra “olá”.

A próxima etapa é obter de alguma forma o objeto $ scope para que possamos lê-lo e modificá-lo. Felizmente, o AngularJS fornece esse recurso por meio dos extras angular.element () ( documentação angular.element ).

Sabemos que o objeto $ scope que queremos é anexado ao div com o atributo ng-controller = “ctrl”. Usamos isso como base para um seletor e então passamos a string para angular.element (). Abaixo está uma função que faz isso. A função getScope () aceita um único argumento, ctrlName, que é o nome do controlador, neste caso, “ctrl”.

function getScope(ctrlName) {
    var sel = 'div[ng-controller="' + ctrlName + '"]';
    return angular.element(sel).scope();
}

A função seria usada da seguinte forma:

var $scope = getScope('ctrl');

Agora, a variável $ scope acima é exatamente a mesma que está dentro do controlador “ctrl”. Podemos fazer coisas como mudar a mensagem de “olá” para “adeus”.

$scope.message = 'goodbye';
$scope.$apply();

Temos que chamar $ apply () porque $ scope é modificado fora do ciclo $ digest.

Aqui está tudo junto dentro de uma demonstração JSFiddle .