使用角度

Question

我正在从Firebase检索数据，当我像这样转换为JSON时：

$scope.array.push(angular.toJson(obj));

我明白了：

["{ "lat": "50", "lon": "3", "title": "my title", "content": "my content" }"]

如何转换它以便我得到它：

[{ "lat": "50", "lon": "3", "title": "my title", "content": "my content"}]

在我的角度指令中，我看到了console.log时的数据，它看起来像这样：

[]
  0: "{ "lat": "50", "lon": "3", "title": "my title", "content": "my content" }"

为了从Firebase获取数据，如果我$scope.array.push(obj);我得到了这个：

[] 0 {key : "value"}

因此，为了让我的代码能够运行，我也需要引号中的'key'。

我遇到的另一个问题是我的指令中的link函数在scope.arrLocations变量中返回数据之前正在运行。有一个watch我希望能够获得对此变量的更改。所以我期待当我正确地格式化数据时它会起作用。

这是我的完整代码：

app.factory('map', ['$q', function($q){

    var map={};
    var mapInfoItems=[];

    map.getMapInfo = function() {
        var deferred = $q.defer();
        var mapitems = firebase.database().ref('mapinfo/'+firebase.auth().currentUser.uid);
        mapitems.on('child_added', function(snapshot){
            mapInfoItems.push(snapshot.val());
            deferred.resolve(mapInfoItems);
        });

        //return mapInfoItems;
        return deferred.promise;
    };

    return map;

}]);



app.controller('mapController', ['$scope', 'map', function($scope, map){
        $scope.myLocations = {};
        $scope.arrLocations = [];
        var allLocations = [];
        //$scope.arrLocations = [ { "lat": "50", "lon": "3", "title": "my title", "content": "my content" }];
        $scope.mapLocations = map.getMapInfo();

        map.getMapInfo().then(function(locations){

           for(var i=0; i<locations.length; i++){
                // create new object each iteration
                var obj ={
                   title  : locations[i].name,
                   content: locations[i].message,
                    lat   : locations[i].lat,
                    lon   : locations[i].lon
                }     
                allLocations.push(obj);
            }  

          $scope.arrLocations = allLocations;  
        });     
}]);




app.directive('myMap', [function() {

    // directive link function
    var link = function(scope, element, attrs) {
        //console.log(scope.myLocations);
        console.log('in the link function');

        //the line below works and the marker is shown on the map
        //scope.arrLocations =  [ { "lat": "50", "lon": "3", "title": "my title", "content": "my content" }];
        //console.log(scope.arrLocations);

        var map, infoWindow;
        var markers = [];
        //var lastElement = '';
        // map config
        var mapOptions = {
           // center: new google.maps.LatLng(50, 3),
            center: new google.maps.LatLng(scope.lastElement.lat, scope.lastElement.lon),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: true
        };

        // init the map
        function initMap() {
            if (map === void 0) {
                map = new google.maps.Map(element[0], mapOptions);
            }
        }    

        // place a marker
        function setMarker(map, position, title, content) {
            var marker;
            var markerOptions = {
                position: position,
                map: map,
                title: title,
                icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
            };

            marker = new google.maps.Marker(markerOptions);
            markers.push(marker); // add marker to array
            google.maps.event.addListener(marker, 'click', function () {
                // close window if not undefined
                if (infoWindow !== void 0) {
                    infoWindow.close();
                }
                // create new window
                var infoWindowOptions = {
                    content: content
                };
                infoWindow = new google.maps.InfoWindow(infoWindowOptions);
                 infoWindow.open(map, marker);
            });
        }

        scope.$watch(function() { return scope.arrLocations; }, function() {
          initMap();  
          console.log(scope.arrLocations);
          scope.lastElement = scope.arrLocations[scope.arrLocations.length - 1];
          // clear markers
          for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(null);
          }
          markers = [];

          angular.forEach(scope.arrLocations, function(value, key){
            //console.log('value: ' + value + ' | key: ' + key);
            // a single object in this example could be:
            // { lat: 50, lon: 3, title: "my title", content: "my content" }
            var location = new google.maps.LatLng(value.lat, value.lon);
            setMarker(map, location, value.title, value.content);
          });


        });
    };

    return {
        restrict: 'EA',
        //scope: {getMapFn: '&'},
        template: '<div id="gmaps"></div>',
        replace: true,
        link: link

    };
}]);

Answer 1

不要对对象进行字符串化...只需将对象本身推送到数组

即可

变化：

$scope.array.push(obj);

要

Dialog

对于长度的控制台日志，听起来你试图在数据被推入数组之前检查长度。很可能在收到数据请求之前

Answer 2

使用我现有的代码。决定改为使用this。