CODEWITHSUNDEEP
javascriptangularjs
JPN
JPN

Reputation: 683

Pass Angular scope variable to Javascript

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>

Upvotes: 28

Views: 75455

Answers (5)

Collin
Collin

Reputation: 454

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.

Upvotes: 0

Jarrod
Jarrod

Reputation: 9465

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.

Upvotes: 0

Divije Narasimhachar
Divije Narasimhachar

Reputation: 379

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>

Upvotes: 2

Ivan Chernykh
Ivan Chernykh

Reputation: 42186

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

Upvotes: 38

S Panfilov
S Panfilov

Reputation: 17581

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

Upvotes: 13

Related Questions