the scope doesn't send data to html

Question

I give my map the lat and lon but in the map it doesnt take it. can anyone help ?

Image 1 : running the app on server + the console log

Image2 : an image of my html code

this is the controller :

        angular.module('todoController', ['ngMap' , 'firebase'])

            // inject the Todo service factory into our controller
            .controller('mainController', ['$scope' , '$firebaseArray' , function($scope , $firebaseArray ,NgMap , $timeout ) {
         // check the ng-map docs for api url and api key       
        $scope.mapsApiUrl = 'AIzaSyA3ZMA6KlxboXRuA7ItNNSlJp3xcgjaB0M'; 
            $scope.$onInit = onInit;

function onInit that initialize the map

        function onInit() {
            NgMap.getMap().then(function (mapInstance) {
            var center = mapInstance.getCenter();

            google.maps.event.trigger(mapInstance, 'resize');
            mapInstance.setCenter(center);

            $timeout(function () {
                $scope.map = mapInstance;
            });
            }) ; }

firebase reference

               // CREATE A FIREBASE REFERENCE
                var config = {
                    apiKey: "AIzaSyAKoDxaWtWmvnDAvMBwddPeGt16gRPzALg",
                    authDomain: "trackeur-backend.firebaseapp.com",
                    databaseURL: "https://trackeur-backend.firebaseio.com",
                    projectId: "trackeur-backend",
                    storageBucket: "trackeur-backend.appspot.com",
                    messagingSenderId: "981610558503"
                };
                firebase.initializeApp(config);

here is the function that run the app

         $scope.addTodo = function () {
                var lat = firebase.database().ref().child('coordinates').child('lat');
                var lon = firebase.database().ref().child('coordinates').child('lon');
                setInterval(() => {
                            lat.on("value", function(snapshot) {
                                    // This isn't going to show up in the DOM immediately, because
                                    // Angular does not know we have changed this in memory.
                                    // $scope.data = snapshot.val();
                                    // To fix this, we can use $scope.$apply() to notify Angular that a change occurred.
                                    $scope.$apply(function() {
                                    $scope.data = snapshot.val();
                                    });
                                });

                            lon.on("value", function(snapshot) {
                                    // This isn't going to show up in the DOM immediately, because
                                    // Angular does not know we have changed this in memory.
                                    // $scope.data = snapshot.val();
                                    // To fix this, we can use $scope.$apply() to notify Angular that a change occurred.
                                    $scope.$apply(function() {
                                    $scope.data1 = snapshot.val();
                                    });
                            });

                            // here I provide the latitude and longitude to my map 

                                console.log($scope.data  +' ,  '+ $scope.data1 ) ; 
                                $scope.coord ={
                                    lat: $scope.data , 
                                    lon: $scope.data1
                                } ; 


                            }, 1000);


                };

My problem is that I get the latitude and longitude from firebase but when I send them to my HTML It doesn't mark the coordinates I got ,actually it doesn't move at all , here's the marker :

<marker position="[{{$coord.lat}} , {{$coord.lon}}] " icon="car2.png"></marker>

Your description of the problem is tough to understand. I have no idea what "I give my map the lat and lon but in the map it doesnt take it." means. On a side note, publishing api keys on SO isn't a great idea. You should change the value to something fake — BShaps, May 01 '18 at 23:00
The [Inline Array Annotation](https://docs.angularjs.org/guide/di#inline-array-annotation) is missing dependencies with the `mainController` construction function. — georgeawg, May 01 '18 at 23:29
Also the screenshot shows two unhandled rejections. Add rejection handlers to show the errors. — georgeawg, May 01 '18 at 23:32
Sorry my bad i will explain the issue : I create a refernce to firebase , then I give the scope two wariables $scope.data that will contain latitude and $scope.data1 that will contain longitude . the attribut position of tag marker takes array of two (latitude and longitude ) and I'm using the scope to provide the attribut position by latitude and longitude .. — elmehdi, May 02 '18 at 08:43
`lat.on` and `lon.on` are non-blocking asychronous operations. The code below them are executed *before* the `data` and `data1` arrive from the server. — georgeawg, May 02 '18 at 09:42
I used the **setInterval** to update the **data** and **data1** every 3seconds , I should track a car and its coordinates change so I must give every 3 seconds the updated **lat** and **lon**. — elmehdi, May 02 '18 at 11:28
The use of `setInterval` is a [code smell](https://en.wikipedia.org/wiki/Code_smell), a symptom of a deeper problem. The code creates an infinite loop that adds infinite event handlers. The memory leak will eventually crash the browser. — georgeawg, May 02 '18 at 16:37

score 0 · Accepted Answer · answered May 02 '18 at 16:22

0

It is better to use only one double curly bracket, {{ }}, interpolation inside an attribute:

<marker position="{{'['+data+','+data1+']'}}"  icon="car2.png">
</marker>

This reduces the number of watchers in the template.

Also use $scope variables that have been applied from asychronous blocks.

answered May 02 '18 at 16:22

georgeawg

48,608
13
72
95

Thank you , I've taken by your advices ! I managed to sort it out – elmehdi May 02 '18 at 17:03
It would be wiser to have only one event handler which triggers on changes to `coordinates` instead of two event handlers, one for `lat` and another for `lon`. – georgeawg May 02 '18 at 17:06

the scope doesn't send data to html

1 Answers1