Reputation: 9557
Here's my controller:
angular.module('myApp')
.controller('HomeController', ['$scope', '$geolocation', function($scope, $geolocation) {
$geolocation.getCurrentPosition({
timeout: 6000
}).then(function(position) {
$scope.position = position;
$scope.myText = 'Text to show';
console.log(position);
console.log($scope.position);
})
}
])
And in template:
{{ position }} <br/>
{{ myText }}
Now, in my console, I get this object
Geoposition {coords: Coordinates, timestamp: 1476965809589}
A sign the position came in
In template, I get this:
{}
Text to show
So, why ain't the $scope.position
not showing in my template, although the Text to show
shows, and the console log confirms the $scope.position
is available?
My home.html
:
<div class="small-12 columns">
<div class="callout clearfix" style="margin-top:20px;">
<h5 class="float-center">Welcome Home.</h5>
{{ position }} <br/>
{{ myText }}
<div ng-show="!position" class="float-center">
<div class="loader">
<span>{</span><span>}</span>
</div>
</div>
</div>
</div>
and state:
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home/home.html',
controller: 'HomeController'
})
Upvotes: 2
Views: 876
Reputation: 9557
Okay, I figured it out.
Had to to this, as in be specific with what I want from the position
object
<div class="callout clearfix" style="margin-top:20px;">
<h5 class="float-center">Welcome Home.</h5>
{{ position.timestamp }} <br/>
{{ position.coords.latitude }} <br/> // this works
{{ myText }}
<div ng-show="!position" class="float-center">
<div class="loader">
<span>{</span><span>}</span>
</div>
</div>
</div>
Upvotes: 1