Question

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

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

我只能看到第一个预标签数据，第二个始终是“{}”

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

Answer 1

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

{{myPosition.coords.latitude}}

希望这有帮助。

Answer 2

我刚试过jfiddle。写下这个以查看纬度：

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

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

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

突出显示错误：

网络位置提供商在＆＃39; https://www.googleapis.com/＆＃39; ：不收到回复。

收到此错误后，我执行了搜索并找到this SO回答。哪个州：

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

所以这值得研究。

$ scope值未在视图中显示

3 个答案: