$scope 值未显示在视图中答案

【问题标题】：$scope value not showing in view$scope 值未显示在视图中
【发布时间】：2016-10-21 12:56:49
【问题描述】：

我正在尝试在我的视图中显示响应.....我在我的控制器中获取数据，但数据未显示在视图中

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link rel="manifest" href="manifest.json"> 
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">



    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ngGeolocation/ngGeolocation.min.js"/>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controller.js"></script>
  </head>
  <body ng-app="starter">
  <ion-nav-view ></ion-nav-view>

  </body>
</html>

app.js

angular.module('starter', ['ionic','starter.controllers','ui.router'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {

      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
  .config(function($stateProvider, $urlRouterProvider) {

    $stateProvider
      .state('Login', {
        cache: false,
        url: '/Login',
        views: {
          '': {
            templateUrl: 'Templates/Login.html',
            controller: 'loginCtrl',
          }
        }
      })

    $urlRouterProvider.otherwise('/Login');

  });

我的控制器

var app=angular.module('starter.controllers',['ngGeolocation']);
    app.controller('loginCtrl',function($geolocation, $scope){
      $scope.test="test string";
      $geolocation.getCurrentPosition({
      }).then(function(position) {
        $scope.myPosition = position;
        console.log($scope.myPosition);

      });
    })

在控制台中我可以看到数据

Login.html

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="main">
  <pre>{{test}}</pre>{{best}}
{{myPosition.latitude}}
</div>
</body>
</html>

我只能看到第一个pre标签数据，第二个总是'{}'

我试图创建一个 plunker，但它对 $geolocation 发出警告，并且该函数正在逃避执行。任何帮助将不胜感激...tq

【问题讨论】：

你能显示所有的 HTML 代码吗？我看不到 HTML 中是否调用了 ng-controller
您也可以发布您的路线吗？
@jeff 如果问题是你提到的.....第一个 pre 标签也会空白对吗？
我只有一个状态，我正在加载那个只有@stephen
@satyachowdary 如果页面上没有调用控制器，则无法在 HTML 中显示该值。

标签： angularjs

【解决方案1】：

您的 $scope.myPosition 是一个 Geoposition 对象。该对象包含一个 coords 对象，该对象包含纬度和经度（以及其他）的值。像这样改变你的观点：

{{myPosition.coords.latitude}}

希望这会有所帮助。

【讨论】：

【解决方案2】：

我刚刚尝试过 jfiddle。写这个来查看纬度：

 `<pre>{{myPosition.coords.latitude}}</pre>`

并确保您的计算机中的位置设置已启用，它将显示正确的值。

【讨论】：

【解决方案3】：

我花了一点时间生成https://jsfiddle.net/jktkq8tL/6/。最值得注意的是添加了一个错误函数，

 $geolocation.getCurrentPosition({
  }).then(function(position) {
    $scope.myPosition = position;
    console.log($scope.myPosition);

  },function(data) {
    console.log(data.error.message);
  });

其中突出显示了一个错误：

“https://www.googleapis.com/”的网络位置提供商：否收到回复。

收到此错误后，我进行了搜索并找到了this SO 答案。其中规定：

我模拟了这个问题，发现成功回调函数仅当 html 页面托管在 Web 服务器上时才调用，而不是从文件系统打开时。

所以这值得研究。

【讨论】：