在角度控制器中收听 phonegap 背景事件答案

【问题标题】：listen to phonegap background event in angular controller在角度控制器中收听 phonegap 背景事件
【发布时间】：2015-02-27 12:27:03
【问题描述】：

我有一个 phonegap 应用程序，想知道应用程序何时使用 pause (http://docs.phonegap.com/en/3.6.0/cordova_events_events.md.html#pause) 事件进入后台。 document.addEventListener("pause",yourCallbackFunction, false); 但是，我正在寻找一种方法让 yourCallbackFunction 在当前范围内的当前路由为 /orders 时触发 $scope.cancel ，否则忽略。我怎样才能做到这一点？感谢任何帮助。

注意：当我在应用程序中访问此页面时，设备就绪已经被触发，因此不需要处理 deviceReady。

此处的上下文代码：

html:

<!doctype html>
  <head>
  </head>
  <body ng-app="myapp">
    <!-- Add your site or application content here -->
    <div ng-view=""></div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-resource.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-cookies.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>

    <script src="app/app.js"></script>

</body>
</html>

app.js 中的javascript：

angular.module('myapp', [ 'ngRoute' ])
  .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', { templateUrl: 'login/login.html', controller: 'LoginCtrl' })
      .when('/orders', { templateUrl: 'app/orders/orders.html', controller: 'OrdersCtrl' });
      .otherwise({ redirectTo: '/' });
  }]);

app.controller('OrdersCtrl', [ '$scope','$filter','$timeout', function($scope,$filter,$timeout,) {

  $scope.date = new Date();
  $scope.refresh = function(){
      getOrders(); //Implemented elsewhere
  }
  $scope.cancel = function(){
      cancelRefresh(); //Implemented elsewhere
  }

}]);

【问题讨论】：

标签： javascript ios angularjs cordova angular-routing

【解决方案1】：

当OrdersCtrl 加载和取消订阅作用域$destroy 时，您可以订阅暂停事件，因此您知道当您在正确的控制器中时该事件会触发：

app.controller('OrdersCtrl'...) {
    function onPause() {
      cancelRefresh();
    }
    document.addEventListener("pause", onPause, false);
    $scope.$on('$destroy', function () {
        document.removeEventListener("pause", onPause);
    });
});

这只是在我使用ngRoute 时才对我有用，而不是ui-router。所以另一种解决方案是在你的模块中添加一个run 部分，注入$location 以检查路径，然后使用可以取消刷新本身的服务或使用$broadcast 将工作委托给控制器：

app.run(function($location, $rootScope, orderService) {        
    document.addEventListener("pause", function() {
        if ($location.path() === '/orders') {
            $rootScope.$broadcast('pauseEvent');
            orderService.cancel();
        }
    }, false);
});

【讨论】：

谢谢，有没有办法将这些功能保留在控制器或角度之外？将它们保留在代码中，我试图将代码分开..