javascript - AngularJS 更新 $scope 变量并输出到 pre

Question

我正在使用以下jsBin example

默认值在 $scope.position 中给出，当有人在输入框中输入位置并点击按钮时，Google map 会检查该位置并返回新的纬度和经度位置的信息，我想要的是 pre 使用新的 lat 和 lng 值进行更新。

    var myApp = angular.module('myApp', []);

function appCtlr($scope, $http, $timeout) {
    var map, marker, mapOptions, myLatlng;

    $scope.output = function(lat, lng) {
        $scope.codeoutput = "var map;\nfunction initialize() {\n  var myLatlng = new google.maps.LatLng(" + lat + "," + lng + ");\n  var mapOptions = {\n    zoom: 4,\n    center: myLatlng\n  }\n\n  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);\n\n  var marker = new google.maps.Marker({\n    position: myLatlng,\n    map: map\n  });\n}\n\ngoogle.maps.event.addDomListener(window, 'load', initialize);\n\n<div id=\"map_canvas\"></div>";
    };

    function initialize() {
        $scope.position = {};
        $scope.position.lat = -25.363882;
        $scope.position.lng = 131.044922;
        myLatlng = new google.maps.LatLng($scope.position.lat, $scope.position.lng);
        mapOptions = {
            zoom: 4,
            center: myLatlng
        };
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        marker = new google.maps.Marker({
            position: myLatlng,
            map: map
        });
        $scope.output($scope.position.lat, $scope.position.lng);

    }


    $scope.reposition = function() {
        url = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + $scope.location + '&sensor=false';

        $http.get(url, null, function(data) {
            if (data.status != "ZERO_RESULTS") {
                var p = data.results[0].geometry.location;
                $scope.position.lat = p.lat;
                $scope.position.lng = p.lng;
                latlng = new google.maps.LatLng(p.lat, p.lng);
                marker.setPosition(latlng);
                map.panTo(latlng);
            }

            $scope.output($scope.position.lat, $scope.position.lng);
            console.log($scope.position);
            console.log($scope.codeoutput);
        });
    };

    initialize();
}

Answer 1

您需要在 success 回调中调用 $scope.output()

    $http.get(url, null, function(data) {

    }).success(function(data) {

      if (data.status != "ZERO_RESULTS") {
            var p = data.results[0].geometry.location;
            $scope.position.lat = p.lat;
            $scope.position.lng = p.lng;
            latlng = new google.maps.LatLng(p.lat, p.lng);
            marker.setPosition(latlng);
            map.panTo(latlng);
        }

      $scope.output($scope.position.lat, $scope.position.lng);

    });

<小时/>

Updated Bin