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

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

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>

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.