Question

我有一个AngularJS应用程序，其中包含一个加载HTTP请求的服务，但该工作正常，但是......

当我的应用程序在开始时处于离线状态时，我会显示一个带有重试按钮的“离线”页面，当我点击按钮并且APP在线时，我需要该服务来加载数据。

问题是当我点击按钮时没有任何反应，在线检查工作正常，但从未调用过Web服务：（

我的服务：

.service('webService', function ($http, $q){
    var defferer = $q.defer()
    var webservice_url = "http://mywebservice_url/";
    $http.get(webservice_url+"?action=get_settings").success(function(data) {
        defferer.resolve(data);
    });
    return defferer.promise;
})

我的控制器：

.controller('NetworkCtrl', function($scope, $location, $timeout, webService) {
    $("#tryagain-button").click(function(e) {
        e.preventDefault();
        if(checkifonline()) {
            webService.then(function(data) {
                $scope.data = data;
            });
        }
    });
})

Answer 1

首先，在控制器中使用jQuery绝对不是angularjs的工作方式。使用ng-click指令。即使您的服务正确实施，它也不会起作用，因为AngularJS不会收到范围内模型更改的通知（您需要使用$ apply，但只需坚持ng-click指令）

其次，服务函数采用构造函数。在此构造函数中，您正在发出http请求（当您离线时）并且承诺已得到解决。您永远不会提出新请求，因为该服务总是返回相同的承诺。您的服务应如下所示：

.service('webService', function ($http){
    var webservice_url = "http://mywebservice_url/";
    this.getSettings = function(){
        return $http.get(webservice_url+"?action=get_settings");
    };
})

和您的控制人员：

.controller('NetworkCtrl', function($scope, $location, $timeout, webService) {
    $scope.onClick = function(){
        webService.getSettings().success(function(data){
            $scope.data = data;
        }
    }
})

和您的HTML按钮：

<button ng-click="onClick()">reload</button>

AngularJS服务具有HTTP请求，脱机状态

1 个答案: