在$ http帖子中显示进度循环？

Question

在请求中使用Angular Material的Progress循环组件的最佳方法是什么$http？

我目前的代码如下:

进度通告:

<md-progress-circular ng-if="determinateValue === 100" md-mode="determinate" value="{{determinateValue}}"></md-progress-circular>

$http 请求:

$scope.determinateValue = 0;

$http.get("/posts")
       .success(function (data) {

          $scope.posts = data;
          $scope.determinateValue = 100;

       })

Answer 1

如果你想要一个md-progress-circular的版本,它也会禁止屏幕并且有一个背景,那么md-progress-circular会在mdDialog里面这样:

     function showWait(){
          $mdDialog.show({
            controller: 'waitCtrl',
            template: '<md-dialog style="background-color:transparent;box-shadow:none">' +
                        '<div layout="row" layout-sm="column" layout-align="center center" aria-label="wait">' +
                            '<md-progress-circular md-mode="indeterminate" ></md-progress-circular>' +
                        '</div>' +
                     '</md-dialog>',
            parent: angular.element(document.body),
            clickOutsideToClose:false,
            fullscreen: false
          })
          .then(function(answer) {

          });
   }

这是我创建的一个plunker,显示了 Plunker

Answer 2

我不认为你需要这个value属性与determinate模式.相反,您应该使用indeterminate模式,然后使用显示和隐藏进度指示器ngShow.

<md-progress-circular md-mode="indeterminate" ng-show="isLoading"></md-progress-circular>

在你的JS中

$scope.isLoading = true;
$http.get("/posts")
   .success(function (data) {
        $scope.isLoading = false;
   });