Passar variável de escopo angular para JavaScript

Eu estou tendo uma variável de escopo angular streetName.

 angular.module('addApp').controller('add', ['$scope',function($scope) { $scope.streetName = "Bonita Ln"; }]);  

Como posso acessar streetName em um javascript definido sob este escopo de controlador (adicionar). Por favor ajude.

 
StreetName: {{streetName}} //here i need to access the value of streetName...

Este caminho é longo mas funciona:

  angular.element(document.querySelector('[ng-controller="add"]')).scope().streetName 

Mais legível:

  var dom_el = document.querySelector('[ng-controller="add"]'); var ng_el = angular.element(dom_el); var ng_el_scope = ng_el.scope(); var street_name = ng_el_scope.streetName; 

E é muito mais curto se você estiver usando o jQuery:

  var street_name = $('[ng-controller="add"]').scope().streetName; 

Link para a demo jsfiddle

Você pode passar o seu escopo para o js var comum com o serviço $ window .

Como isso:

 angular.module('addApp', []) .controller('add', ['$window', function ($window) { ... $window.streetName = $scope.streetName; ... } 

e append o seu js depois disso no código jscomo assim:

  

Mas tenha em mente que é uma solução alternativa, não a melhor solução

Eu enfrentei um problema semelhante. Eu encontrei um trabalho ao redor. Funcionou bem para mim, mas não tenho certeza se é a abordagem correta.

Crie um campo de input oculto no html e atribua a ele seu valor de angular. Acesse este valor em javascript. Certifique-se de criá-lo antes da tag de script para que ele seja inicializado quando você acessar sua tag de script.

Algo assim:

 
StreetName: {{streetName}}