How to inject an Angular variable into a JavaScript variable?

Question

I have this function in my angular controller:

$scope.get_all_places = function () {
    $http.get("get-all-places").then(function (response) {
        $scope.selected_place = eval(response.data[0]);
    });
};

and i want to set the values i get from $scope.selected_place to this JavaScript code :

var $shape_options = selected_place.shape_attributes;
var $map_options = selected_place.map_attributes;
switch ($shape_options.shape_type) {
    case 'circle':
        var $center = selected_place.center;
        var $radius = selected_place.radius;
        break;
    case 'rectangle':
        var $bounds = selected_place.rectangle;
        break;
    case 'polygon':
        var $path = selected_place.polygon;
        break;
}

but the problem that the JavaScript code executed before the angular get the data from the server.

Any ideas how to do it?

why don't you put your javascript code inside get callback?

jcubic
– jcubic

2016-07-20 07:56:38 +00:00
Commented Jul 20, 2016 at 7:56 — jcubic
– jcubic, Commented Jul 20, 2016 at 7:56

madalinivascu · Accepted Answer · 2016-07-20 08:16:07Z

4

Place all your code in the then function of your ajax call,ajax is executed asynchronously

$scope.get_all_places = function () {
    $http.get("get-all-places").then(function (response) {
        $scope.selected_place = eval(response.data[0]);
        var $shape_options = selected_place.shape_attributes;
var $map_options = selected_place.map_attributes;
switch ($shape_options.shape_type) {
    case 'circle':
        var $center = selected_place.center;
        var $radius = selected_place.radius;
        break;
    case 'rectangle':
        var $bounds = selected_place.rectangle;
        break;
    case 'polygon':
        var $path = selected_place.polygon;
        break;
    });
 other_functions($map_options);//call the functions that need the $map_options variable
};

edited Jul 20, 2016 at 8:16

answered Jul 20, 2016 at 7:57

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mohammad AL-Raoosh Over a year ago

But there is other scripts that need the map_options variable

madalinivascu Over a year ago

i don't see any map_options variable if you mean $map_options then the code that uses that variable has to run in the then function as well

Mohammad AL-Raoosh Over a year ago

But the code is too large to put it inside the then function.

madalinivascu Over a year ago

do you know what a function is and how to use it?

Mohammad AL-Raoosh Over a year ago

Yes! but why you asking that?

|

Abdallah Yashir · Accepted Answer · 2016-07-20 08:08:30Z

You can create a function:

function determineShape(selected_plane){
    var $shape_options = selected_place.shape_attributes;
    var $map_options = selected_place.map_attributes;
    switch ($shape_options.shape_type) {
        case 'circle':
            var $center = selected_place.center;
            var $radius = selected_place.radius;
            break;
        case 'rectangle':
            var $bounds = selected_place.rectangle;
            break;
        case 'polygon':
            var $path = selected_place.polygon;
            break;
    }
}

Then call it in the promise response:

$scope.get_all_places = function () {
    $http.get("get-all-places").then(function (response) {
        // Run after promise is returned
        determineShape(response.data[0]);
    });
};

score 1 · Accepted Answer · 2016-07-20 08:14:39Z

1

Get Your Variable in jQuery :

Try this one

var selected_place = $('[ng-controller="your controller name here"]').scope().selected_place;

little mistake:

Try this one Again:

var selected_place = $('[ng-controller="your controller name here"]').scope().get_all_places;

edited Jul 20, 2016 at 8:14

answered Jul 20, 2016 at 8:02

user4520208

1 Comment

Mohammad AL-Raoosh Over a year ago

I get this error Cannot read property 'selected_place' of undefined

wmash · Accepted Answer · 2016-07-20 08:00:46Z

0

Not the most tidiest solution but you could put the value into a hidden input field and then set that to the JS variable, something like:

<input id="selected_place" type="hidden" value="{{ selected_place }}"/>

...and the JS

document.getElementById("selected_place").value;

answered Jul 20, 2016 at 8:00

wmash

4,1924 gold badges38 silver badges74 bronze badges

1 Comment

Mohammad AL-Raoosh Over a year ago

I tried it but the java script code executed before the angular get the value.

Collectives™ on Stack Overflow

How to inject an Angular variable into a JavaScript variable?

4 Answers 4

6 Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related