2015-06-03 35 views
0

我正在使用AngularJS移動應用。 我試圖做到的,是儘快我打開GPS更新地理定位數據。我如何實現這一目標?我面臨的問題是,爲了更新數據,我必須導航到其他頁面。這些是代碼。我將數據從一個控制器共享到另一個控制器。AngularJS地理位置數據更新

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

編輯:

不知怎的,我設法得到它像這樣工作。

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

但它在textarea中顯示{{getLoc()}}。無論如何,我可以隱藏它,只有當它獲得數據時才顯示出來?

回答

1

您可以使用ng-bind-html

所以它會像

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

它的工作原理。謝謝。 –