Question

我的AngularJS代码获取如下数据：

this.retrieve = function (contentStatusId) {
    $http({
        url: '/api/Content/Retrieve',
        method: "GET",
        params: {
            contentStatusId: contentStatusId,
        }
    }).success(function (result) {
        home.grid.data = angular.copy(result);
    });
};

我有一个名为message的变量，它附加到我的app控制器的$ scope。

我如何修改它，以便在检索之前将message变量设置为“获取”如果检索需要超过一秒并且检索返回{{1变量立即设置为null？

我想用某种可重复使用的函数来做这件事，因为我有很多次这样的提取。

可以

Answer 1

查看此plunker。

您可以实现一个显示“抓取”消息的指令：

app.directive('fetching', ['$rootScope', '$timeout', function($rootScope, $timeout) {
  return {
    restrict: 'E',
    replace: true,
    template: '<div class="fetching" ng-if="pending > 0">fetching...</div>',
    link: function(scope, elem, attrs, ngModelCtrl) {
      scope.pending = 0;

      $rootScope.$on('ShowFetching', function() {
        $timeout(function() {
          scope.pending++;
        }, 1000);
      });

      $rootScope.$on('HideFetching', function() {
        scope.pending--;
      });
    }
  };
}]);

可以在模板中的某个位置使用（如果有的话，可以在ng-view之外使用）

<body ng-controller="MainCtrl as ctrl">
    <fetching></fetching>
    <button ng-click="ctrl.startFastAjax()">Fast Ajax</button>
    <button ng-click="ctrl.startSlowAjax()">Slow Ajax</button>
</body>

现在，当您初始化ajax调用时，$emit 'ShowFetching'事件以及完成时（成功或错误），您$emit 'HideFetching'事件。这可以通过http拦截器（checkout $http docs）集中完成。

诀窍是你以1秒的延迟递增pending计数器。这意味着它可能会先递减，但这没关系，因为呈现消息的条件是pending > 0。

编辑：

由于上述示例可能会在某些情况下闪烁，因此这是一个重做的plunker，但不会这样做。在实际应用程序中，将Math.floor((Math.random() * 1000000) + 1).toString()替换为GUID之王。

这个想法是，在递减之前，检查是否有待处理的任务来执行该特定源的增量（因此，requestId）。如果是，请取消任务，不执行任何操作。

如何以延迟切换变量的值？

1 个答案: