Pass Angular scope variable to Javascript

Question

I am having a Angular scope variable streetName.

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

How can I access streetName in a javascript defined under this controller (add) scope. Please help.

<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

This way is long but it works:

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

More readable:

 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;

And it's much shorter if you're using jQuery:

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

Link to jsfiddle demo

• JPN: But this is returning null. It couldnt read the controller 'add'.
• Ivan Chernykh: @JPN Seems like the element is not ready yet. Try to put my code in window.onload handler
• JPN: Its working :) but sometimes it gives null. Looking at what I am missing.. thanks a ton..!!
• Ivan Chernykh: @JPN in case of null you can add some little setInterval that will check for element/scope until it is completely ready. Good luck!
• JPN: @chrmiv I found out the issue... I didnt include the ng-controller in the div tag which wraps around the javascript tag.. now its perfectly working. thank you so much..

Answer 2

You may pass your scope vat to common js var with $window service.

Like this:

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

and attach your js after that in comon js code like that:

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

But keep in mind that it's workaround, not best solution

• Dr. Hilarius: This is perfect! Just in case it's not clear, you can access values assigned to the angular $window object with the javascript window object.
• lalitpatadiya: @Sergey Panfilov : but how can i access that value in myscript value.?

Answer 3

I faced a similar problem. I found a work around. It worked well for me but not sure if it is the right approach.

Create a hidden input field in the html and assign it your value from angular. Access this value in javascript. Make sure you create it before your script tag so that it will be initialized when you reach your script tag.

Something like this:

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

• khalidh: Not working, I got "I got the street name {{name}}" in a console

Answer 4

Simple, non-complicated, jQuery solution:

HTML

<div id="data" data-street="{{streetName}}"></div>

Javascript

$(document).ready(function() {
 var streetName = $('#data').data('street');
}); 

---

The $(document).ready... is important to give angular time to set the variables.

Answer 5

In Angular 11 / typescript 4.3.2 I was able to do this by adding this to my ngOnInit:

window.localStorage.setItem("roundChartEdges","false")

then could access the variable in the javascript chartsjs draw function I was overriding:

Chart['elements'].Rectangle.prototype.draw = function () {
 console.log(window.localStorage.getItem("roundChartEdges"))
 ...
}

Not a bad solution if you aren't storing sensitive data.

I needed to programmatically tell chartsjs when to round the bar chart edges and when not to, using variables defined in my ngOnInit function.