在服務方法上使用$ interval無法正常工作

Question

我正在構建一個移動Web應用程序，該應用程序可以檢測用戶瀏覽器是否可以訪問Internet。

我正在使用AngularJS框架來實現這一目標。 我每隔1000毫秒從AppData調用一個服務方法，以測試用戶與ajax請求的連接。

PicController將結果綁定到我的html視圖。

我的想法是創建一個服務AppData，它將存儲我的應用程序的常規屬性和方法。

這段代碼根本行不通，我猜這是錯誤的方式，有專家可以告訴我該怎么做嗎？

錯誤：

TypeError: Cannot read property 'online' of undefined
    at isOnline (pictureViewer.js:24)

碼：

'use strict';

var picApp = angular.module('pictureViewerApp',[]);

picApp.run(['$interval','AppData', function($interval, AppData){
    $interval(AppData.isOnline,1000);
}]);

picApp.controller("PicController",['$scope', 'AppData', function($scope, AppData){
    $scope.online = AppData.online;
}]);

picApp.factory('AppData', ['$http', function($http) {
    var AppData = {};
    AppData.online = false;
    AppData.isOnline = function() {
        var appData = this;
        $http.get('online.php').
            success(function(data) {
                appData.online = true;
            }).
            error(function() {
                appData.online = false;
            });
        console.log("AppData.online = ", appData.online);
    };
    return AppData;
}]);

編輯：錯誤恰好發生在此行：

console.log("AppData.online = ", appData.online);

編輯2：如果我一次調用它的方法工作正常，則僅當我使用$ interval調用它時，問題才會發生。

謝謝

Answer 1

1）您的視圖將不會更新，因為$scope.online綁定到一個value ，而不是reference （對象/數組/函數）。

2）如果不使用綁定（檢查瀏覽器兼容性），則不能將“ AppData.isOnline”作為參數傳遞（檢查瀏覽器兼容性） https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

檢查以下工作示例：

 var picApp = angular.module('pictureViewerApp',[]); picApp.run(function(AppData, $interval) { $interval(AppData.isOnline.bind(AppData), 1000); /* //Is same as $interval(function(){ AppData.isOnline(); }, 1000);*/ }); picApp.controller("PicController",['$scope', 'AppData', function($scope, AppData){ $scope.AppData = AppData; }]); picApp.factory('AppData', function($q) { var AppData = { online: false }; AppData.isOnline = function() { var deferred = $q.defer(); // TODO: Use $http to load. this.online = true; deferred.resolve(true); return deferred.promise; }; return AppData; });

 <!DOCTYPE html> <html ng-app="pictureViewerApp"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.0-rc.0/angular.js" data-semver="1.4.0-rc.0"></script> </head> <body ng-controller="PicController"> <p>User is online? {{AppData.online}}!</p> </body> </html>

Answer 2

我想建議使用攔截器。 如果它是正確的請求，只需chceck，並且如果它具有正確的頭，則將其設置為ok，如果它不是$injector放置rootScope，甚至廣播此事件。 然后像請求者一樣使用服務

picApp.service('AppData', function($http) {
    this.getOnlineResponse = function(){
        $http(someApiRequestPath);
       }
     return this;
});

在服務方法上使用$ interval無法正常工作

問題描述

2 個解決方案

解決方案1
2 已采納 2015-04-14 12:11:43

解決方案2
0 2015-04-14 12:41:29

在服務方法上使用$ interval無法正常工作

問題描述

2 個解決方案

解決方案1 2 已采納 2015-04-14 12:11:43

解決方案2 0 2015-04-14 12:41:29

解決方案1
2 已采納 2015-04-14 12:11:43

解決方案2
0 2015-04-14 12:41:29