Passa la variabile di ambito angolare a Javascript

Question

Sto avendo una variabile di ambito Angular streetName.

<script type="text/javascript"> 
    angular.module('addApp').controller('add', ['$scope',function($scope) { 
      $scope.streetName = "Bonita Ln"; 
    }]); 
</script> 

Come posso accedere della via in un javascript definito in questo controller (aggiungere) portata. Per favore aiuto.

<div ng-app="addApp" ng-controller="add"> 
StreetName: {{streetName}} 

<script type="text/javascript"> 
//here i need to access the value of streetName... 
</script> 

</div> 

Answer 1

In questo modo è lunga ma funziona:

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

più leggibile:

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; 

Ed è molto più breve se si sta utilizzando jQuery:

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

Link a jsfiddle demo

Answer 2

È possibile passare il tuo scope scope a common js var con il servizio $ window.

Ti piace questa:

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

e allega il tuo js dopo che nel codice comon js così:

<script type="text/javascript"> 
    document.write("\<script src='...' type='text/javascript'>\<\/script>"); 
</script> 

Ma tenere a mente che si tratta di soluzione, non è la soluzione migliore

Answer 3

I affrontato un problema simile. Ho trovato un lavoro in giro. Ha funzionato bene per me, ma non sono sicuro se sia l'approccio giusto.

Creare un campo di input nascosto in html e assegnargli il valore da angolare. Accedi a questo valore in javascript. Assicurati di crearlo prima del tag script in modo che venga inizializzato quando raggiungi il tag script.

Qualcosa di simile a questo:

<div ng-app="addApp" ng-controller="add"> 
    StreetName: {{streetName}} 
    <input type="hidden" id="dummyStreetName" value={{streetName}}> 
    <script type="text/javascript"> 
     console.log("I got the street name "+$("#dummyStreetName").val()); 
    </script> 
</div>