javascript - 重新加载并检查用户是否使用 angularjs 连接到 phonegap

Question

我正在使用 phonegap 创建一个应用程序。我成功地检查了用户是否连接到互联网。但是如果用户没有连接。我想放置一个按钮，以便用户可以单击重新加载并重新加载页面。这是我的代码的样子:

<ons-template id="directory.html">
    <ons-navigator var="app.navi" >
    <div ng-if="online"> <!-- Check If user is online or not -->
    <ons-page ng-controller="directoryControl">
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="menu.toggle()">
            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">Directory List</div>
      </ons-toolbar>
     <p>Yes you are Connected!</p>
    </ons-page>
    </div>

    <div ng-if="!online">
      <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="menu.toggle()">
            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">Directory List</div>
      </ons-toolbar>

        <p>Oops! You are not online..!<br/><ons-button ng-click="app.navi.pushPage('directory.html')">Reload</ons-button></p>
      </ons-page>
    </div>
  </ons-navigator>
</ons-template>

我希望用户点击 <ons-button ng-click="app.navi.pushPage('directory.html')">Reload</ons-button>这个按钮然后可以重新连接到离开的页面。

这里我使用的是单页模板结构。

如果你想看一下 Controller ，那么作为引用，我正在使用下面的 Controller ，而我根本没有使用 ng-view/route。

    module.controller('directoryControl', function($scope, $http, $rootScope, ajaxCall) {
    ons.ready(function() {

var dataURL = "get_category_index";
var valuePickup = "categories"
ajaxCall.GetIndex($scope, dataURL, valuePickup);

$scope.setCurrentCategory = function(categoryName){
     $scope.CurrentCategory = categoryName;
     $rootScope.CurrentCategory=$scope.CurrentCategory;
            }
        });
    });

这里必须要用route吗？还是有其他方法可以做到这一点？

我只想使用重新加载页面并保持在同一页面上而不重新启动进程。

Answer 1

您可以使用Network cordova plugin。

https://github.com/apache/cordova-plugin-network-information

安装

cordova plugin add https://github.com/apache/cordova-plugin-network-information

示例代码

function checkConnection() {
    var networkState = navigator.connection.type;

    var states = {};
    states[Connection.UNKNOWN]  = 'Unknown connection';
    states[Connection.ETHERNET] = 'Ethernet connection';
    states[Connection.WIFI]     = 'WiFi connection';
    states[Connection.CELL_2G]  = 'Cell 2G connection';
    states[Connection.CELL_3G]  = 'Cell 3G connection';
    states[Connection.CELL_4G]  = 'Cell 4G connection';
    states[Connection.CELL]     = 'Cell generic connection';
    states[Connection.NONE]     = 'No network connection';

    alert('Connection type: ' + states[networkState]);
}

checkConnection();