Question

在asp.net mvc 5上工作，毫无疑问，Angular是构建现代Web应用程序的一个很棒的框架。需要加载多个小数据。在按钮事件中加载数据指示器时需要帮助。是否可以创建加载指示器的指令。任何类型的建议都是可以接受的。

Answer 1

假设默认status.isUploadingStarted为false;

当用户点击上传按钮时，我们将在那时进行

$scope.status.isUploadingStarted = true;

因此，在这种情况下，span将处于活动状态，它将显示微调器，加载数据后，将其设为false;

<button ng-click="upload()" class="btn upload-custom btn-primary" ng-disabled="status.isUploadingStarted">
                {{status.isUploadingStarted? "Uploading" : "Upload File"}}
                <span ng-show="isUploadingStarted"><i class="fa fa-spinner fa-spin"></i></span>
            </button>

在控制器中：

$scope.status = {};
$scope.status.isUploadingStarted = false;

$scope.upload = function(){
   $scope.status.isUploadingStarted = true;  //data is loading
   //data loaded successfully
   $scope.status.isUploadingStarted = false;
}

您可以这样使用。在控制器中只需更改 isUploadingStarted

的值

如果您有任何分类，请告诉我

Answer 2

试用此代码

    <div ng-app='demo'>
<div ng-controller='loadData'>
  <button ng-click='uploadData($event)' >upload</button><indicator-tag></indicator-tag>
<div>{{dataUploaded}}</div>
</div>
</div>

<强> JS

    var demo = angular.module('demo', []);
demo.controller('loadData', function($scope,$rootScope,$http){
  var buses=[
  {
    "name":"aaa",
    "status":"A/C"
  },
  {
    "name":"bbb",
    "status":"Non A/C"
  },
  {
    "name":"ccc",
    "status":"A/C"
  },
  {
    "name":"ddd",
    "status":"Non A/C"
  }
  ];
   $scope.uploadData = function() {
   var initial="Loading...";
   var afterLoading="uploaded";
   $rootScope.$broadcast('changeIndicator',initial);
   $http.get("/echo/json/", buses).success(function(data, status, headers, config) {
   $scope.dataUploaded=buses;
      $rootScope.$broadcast('changeIndicator',afterLoading);
    });
   };
});
demo.directive('indicatorTag', function() {
      return {
    restrict: 'E',
    replace: true,
    transclude: false,
    template: '<span>{{text}}</span>',
    link: function(scope, element, attrs){
       scope.changeText = function(data){
         scope.text = data;
       };
         scope.$on('changeIndicator',function(event, data){
             scope.changeText(data)
         });
     }
  };
});

Fiddle Demo

在角度切换视图时加载指示器

2 个答案: