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

Posted

技术标签:

【中文标题】无法在视图角度中显示 $scope 变量【英文标题】:Can't display $scope variable in view angular 【发布时间】:2016-10-20 12:21:59 【问题描述】:

这是我的控制器:

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

【问题讨论】:

在模板中你已经在使用HomeController 比如:&lt;div ng-controller="HomeController"&gt;position&lt;/div&gt;? 你能添加完整的html吗?? 你可以试试这个:.controller('HomeController', ['$scope', '$geolocation', function($scope, $geolocation) $scope.model = ; $geolocation .getCurrentPosition( timeout: 6000 ).then(function(position) $scope.model.position = position; $scope.myText = '要显示的文本'; console.log(position); console.log($scope .model.position); ) ]) 在模板中:model.position myText Angular 需要点符号来解析某些对象。 尝试在$geolocation.getCurrentPosition(之前通过$scope.position = ;初始化位置。 尝试在视图中使用 position.timestamp 并检查你得到了什么......也许角度无法解析地理定位对象。 【参考方案1】:

好的,我想通了。

不得不这样做,因为我想从 position 对象中得到具体说明

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

【讨论】:

以上是关于无法在视图角度中显示 $scope 变量的主要内容,如果未能解决你的问题,请参考以下文章

更新视图角度的值

角度 $scope 变量未在控制器中更新

手动更改后角度不更新 $scope 变量

如何从 chrome 控制台以角度访问 $scope 变量

值更改时角度组件不更新

使用 $scope 时,角度中的数据会显示并消失