AngularJS Обновление данных о геолокации

Question

Я занимаюсь мобильным приложением, используя AngularJS. Я пытаюсь обновить данные геолокации сразу после включения GPS. Как мне это достичь? Проблема, с которой я сталкиваюсь, заключается в том, чтобы обновлять данные, я должен перейти на другую страницу. Это коды. Я делюсь данными с одного контроллера на другой.

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

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

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

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

Первый контроллер

.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("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(); 
}]) 

EDIT:

Каким-то образом мне удалось заставить его работать, как это.

.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."; 
}]) 

И, на вид, я выразился так.

<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>