角度觀察$ http.pendingRequests中指令的變化

嗨，我是Angular的新手，我仍然試圖感受一下工作方式。

我正在創建一個loaging框指令，它將基於一個將成爲服務的URL的關鍵字。

我想什麼做的是顯示器的變化$ http.pendingRequests並驗證是否任何數組對象裏面包含我給負載的關鍵box.Here就是我所以：

define(['angular', './../../module'], function (angular, directivesModule) { 
directivesModule.directive('loadingBoxDir', ['EVENTS', '$http', function (EVENTS, httpExtenderSvc) { 
    var headerDir = { 
     restrict: 'E', 
     templateUrl: 'App/scripts/main/directives/loadingBox/LoadingBoxDir.html', 
     scope: { 
      loadingKey: '=', 
     } 
    }; 

    headerDir.link = function (scope, element) { 
     element.hide(); 
     displayRotatingBox(scope, element); 

     //first failed attempt 
     scope.$watch($http.pendingRequests, function() { 
      //logic executed to display or hide loading box 
     }); 

     //second failled attempt 
     scope.$on('ajaxStarted', function() { 
      //display or hide rotating box based on $http.pendingRequests 
     }); 

     //second failled attempp 
     scope.$on('ajaxCompleted', function() { 
      //display or hide rotating box based on $http.pendingRequests 
     }); 
    }; 

    var isRotatingBoxActive = false; 

    function displayRotatingBox(scope, element) { 
     var pendingRequests = httpExtenderSvc.getPendingRequests(); 
     angular.forEach(pendingRequests, function (request) { 
      if (request.url.indexOf(scope.loadingKey) !== -1) { 
       element.show(); 
       isRotatingBoxActive = true; 
      } 
     }); 
    } 

    function hideRotatingBox(element) { 
     if (isRotatingBoxActive) { 
      element.hide(); 
     } 
    } 

    return headerDir; 
}]);

}）;

第一次嘗試 - 我的第一次嘗試是嘗試並根據$watch觀看$http.pendingRequests上的更改。我期望發生的每一次對象被添加到pendingRequests或刪除我的功能將被執行。這不起作用，我認爲，因爲觀看的對象必須在範圍集...我不確定這是否原因，但這是我目前對這個問題的理解。

第二次嘗試 - 我創建了一個HttpInterceptor和requestError，response，responseError廣播ajaxStarted要求和ajaxCompleted。在這種情況下，問題是當我在n事件中檢查$http.pendingRequests時，掛起的請求尚未添加。

有沒有人有任何想法，我怎麼可以從指令的上下文看$http.pendingRequests對象的變化？

來源

2014-07-06 aleczandru

我認爲您應該可以在手錶中使用function()語法。

scope.$watch(function() { 
    return $http.pendingRequests.length; 
}, function() { 
    //logic executed to display or hide loading box 
});

語法在docs爲$watch

來源

2014-07-06 09:41:23 ivarni

變化看功能

scope.$watch(function() { 
    return $http.pendingRequests.length > 0; 
}, function(hasPending) { 
    if (hasPending) { 
     // show wait dialog 
    } 
    else { 
     // hide wait dialog 
    } 
});

的解釋

來源

2014-07-06 10:04:22 pixelbits

角度觀察$ http.pendingRequests中指令的變化

回答

相關問題