javascript - AngularJS 地理位置数据更新

Question

我正在使用 AngularJS 制作一个移动应用程序。 我想要实现的目标是在打开 GPS 后立即更新地理位置数据。我该如何实现这一目标？我面临的问题是，为了更新数据，我必须导航到其他页面。这些是代码。我正在将数据从一个 Controller 共享到另一个 Controller 。

.factory('sharedProperties', function () {
    var coordinates = {};

    var getC = function () {
        return coordinates;
    };

    var setC = function (value) {
        coordinates = value;
        return coordinates;
    };

    return {
        getCoords: getC,
        setCoords: setC
    };
})

第一 Controller

.controller('MessageController', ['$scope', 'sharedProperties', function ($scope, sharedProperties) {

    var nObj = sharedProperties.getCoords();
    console.log(nObj);

        $scope.message = "This is my location: " + nObj.lat + ", " + nObj.lng + ". I'm around " + nObj.acc + " meters from point.";    
}])

第二个 Controller

.controller("mainController", ['$scope', 'sharedProperties', function ($scope, sharedProperties) {
    $scope.lat = "0";
    $scope.lng = "0";
    $scope.accuracy = "0";
    $scope.error = "";
    $scope.model = {
        myMap: undefined
    };
    $scope.myMarkers = [];

    $scope.showResult = function () {
        return $scope.error == "";
    }

    $scope.mapOptions = {
        center: new google.maps.LatLng($scope.lat, $scope.lng),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };

    $scope.showPosition = function (position) {
        $scope.lat = position.coords.latitude;
        $scope.lng = position.coords.longitude;
        $scope.accuracy = position.coords.accuracy;
        $scope.$apply();

        sharedProperties.setCoords({
            'lat': position.coords.latitude,
            'lng': position.coords.longitude,
            'acc': position.coords.accuracy
        });

        var latlng = new google.maps.LatLng($scope.lat, $scope.lng);
        $scope.model.myMap.setCenter(latlng);
        $scope.myMarkers.push(new google.maps.Marker({
            map: $scope.model.myMap,
            position: latlng,
            title: 'You are here'
        }));

    }

    $scope.showMarkerInfo = function (marker) {
        $scope.myInfoWindow.open($scope.model.myMap, marker);
    };

    $scope.showError = function (error) {
        switch (error.code) {
        case error.PERMISSION_DENIED:
            $scope.error = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            $scope.error = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            $scope.error = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            $scope.error = "An unknown error occurred."
            break;
        }
        $scope.$apply();
    }

    $scope.getLocation = function () {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition($scope.showPosition, $scope.showError,
                                                { enableHighAccuracy: true});
        } else {
            $scope.error = "Geolocation is not supported by this browser.";
        }
    }

    $scope.getLocation();
}])

编辑:

不知何故，我设法让它像这样工作。

.controller('MessageController', ['$scope', 'sharedProperties', function ($scope, sharedProperties) {
$scope.getLoc = function () {
        var nObj = sharedProperties.getCoords();
        console.log(nObj);
        var numbers = [nObj.lat, nObj.lng, nObj.acc];
        return "This is my location: " + numbers[0].toFixed(6) + ", " + numbers[1].toFixed(6) + ". I'm around " + numbers[2].toFixed(0) + " meters from point.";   
}])

而在 View 中，我是这样表述的。

<textarea style="width: 100%; height: 183px;" placeholder="Message">{{getLoc()}}</textarea>

但它在文本区域中显示 {{getLoc()}}。无论如何，我可以隐藏它并仅在获取数据时显示吗？

Answer 1

您可以使用ng-bind-html

所以它会像

<textarea style="width: 100%; height: 183px;" placeholder="Message" ng-bind-html="getLoc()"></textarea>