javascript - 使用 Angular JS 和 Cordova 获取用户 60 秒的位置

标签 javascript angularjs cordova ionic-framework

应用运行时是否可以每分钟获取用户的位置?据我了解,该位置只能在 index.html 文件中获取。理想情况下,我想在 controller.js 中执行此操作,这样我就可以使用 AJAX 调用将位置保存到我的数据库中。

我尝试使用setTimeout()每分钟运行一次。但是,我只能看到它被调用一次:

function onDeviceReady() {
    setTimeout(getLocation(), 60* 1000);
}

function getLocation() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
}

我正在使用cordova-plugin-geolocation插件!我尽量避免使用Google的插件。

  1. 我可以在 onDeviceReady() 函数中每分钟获取用户的位置吗(仅当应用运行时,不需要后台刷新)?
  2. 我可以获取用户在controller.js 文件中的位置吗?

最佳答案

您的代码不起作用,因为它是

  1. 不受摘要周期的约束(因此 Angular 不会对其执行脏检查并更新 View )
  2. 正在使用setTimeout ,它仅对一次性任务进行排队,而不是按一定时间间隔执行的任务。

这是一个可以在 Controller 中运行的简单调整:

function onDeviceReady() {
  $interval(function() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
  }, 60000)
}

不过,我认为这在 Controller 中是一个糟糕的解决方案。 Controller 不应访问 DOM(组件 Controller 除外),是的,navigator是 DOM 的一部分。以下是使用最佳实践的两种替代方案 - 指令或组件。

<小时/>

Angular 1.4

class LocationCtrl {
  constructor() {
    this.position = null
  }
}

function locationContainerDirective($interval) {
  function link(scope, el, attrs, ctrl) {
    const promise = $interval(() => {
      navigator.geolocation.getCurrentPosition(function(position) {
        ctrl.onUpdatePosition({ position })
      })
    }, 60000)

    scope.$on('$destroy', () => $interval.cancel(promise))
  }

  return {
    scope: {
      onUpdatePosition: '&'
    },
    bindToController: true,
    restrict: 'E',
    require: 'location',
    controller: LocationCtrl,
    controllerAs: 'location',
    transclude: true,
    template: '<div ng-transclude></div>',
    link
  }
}
<小时/>

Angular 1.5(或带垫片的 1.3)

我建议创建一个通过回调提供位置的容器组件,如下所示:

angular.component('position', {
  outputs: {
    onUpdatePosition: '&'
  }
  controller: class PositionCtrl {
    constructor($interval) {
      this.$interval = $interval
    }

    $onInit() {
      this.$interval(() => {
        navigator.geolocation.getCurrentPosition((position) => {
          this.onUpdatePosition({ position })
        })
      })
    }
  }
})

然后可以像这样在组件中使用它:

  <position on-update-position='$ctrl.onUpdatePosition(position)'></position>
  <google-map focus='$ctrl.position'></google-map>

哪里<google-map>是一些使用导航器位置的任意组件。

关于javascript - 使用 Angular JS 和 Cordova 获取用户 60 秒的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35483636/

相关文章:

javascript - 通过输入类型提交按钮从一个选项卡传递到另一个选项卡

javascript - Selenium 在 Try block 中崩溃

javascript - 如何使用平均堆栈访问 Schema.ObjectId 以获取客户端上的对象 json?

angularjs - 如何在 Node js 中重定向到 url 并对其发出 post 请求?

javascript - Browserify、Babel 6、Gulp - 传播运算符上出现意外标记

javascript - 使用 jQuery 更改菜单选项宽度

javascript - ng-include 不会每次使用 $scope 都渲染部分 View

javascript - 在 Cordova 应用程序中检测互联网丢失

javascript - Phonegap 中适用于 Android 的应用程序图标

javascript - 有没有办法在 Ionic/Angular/Cordova 堆栈中查找以 dp(而不是 px)为单位的屏幕尺寸?