无法在视角中显示$ scope变量

时间:2016-10-20 12:21:59

标签: angularjs

这是我的控制人员:

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

在模板中:

   {{ position }} <br/>
   {{ myText }}

现在,在我的控制台中,我得到了这个对象

Geoposition {coords: Coordinates, timestamp: 1476965809589}

该位置的标志

在模板中,我明白了:

{} 
Text to show

那么,为什么$scope.position未显示在我的模板中,尽管Text to show显示,并且控制台日志确认$scope.position可用?

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

并声明:

$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'home/home.html',
    controller: 'HomeController'
  })

1 个答案:

答案 0 :(得分:1)

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>