অ্যাজুলার অনুরোধে অ্যাংুলারজ স্ক্রীন লোড হচ্ছে

117

অ্যাঙ্গুলারজগুলি ব্যবহার করে, এজ্যাক্স অনুরোধটি সম্পূর্ণ না হওয়া পর্যন্ত আমাকে লোডিং স্ক্রিন (একটি সাধারণ স্পিনার) দেখাতে হবে। একটি কোড স্নিপেট সঙ্গে কোনও ধারণা প্রস্তাব করুন।

angularjs  angularjs-directive 
— বধ্রীনাথ কানেসনে
সূত্র
4
— অজয় বেনিওয়াল
2
— প্রশব
সেরা অনুশীলনটি ব্যবহার করা হচ্ছে $httpProvider.interceptorsযেহেতু এটি আজাক্সের অনুরোধ শুরু হয় এবং কখন শেষ হয় তা হ্যান্ডেল করতে পারে। এজন্য $watchএজ্যাক্স কল কখন শুরু এবং শেষ হবে তা সনাক্ত করার দরকার নেই।
— ফ্র্যাঙ্ক মিয়াট থু
আপনি কীভাবে আমার কারখানার কৌণিক-httpshooter চেকআউট করবেন , এটি আপনাকে লোডার এবং হিমায়িত ইউআইয়ের জন্য আরও ভাল নিয়ন্ত্রণ দেয়
— সিদ্ধার্থ

উত্তর:

210

ডেটা লোডিংয়ের স্থিতি নির্দেশ করার জন্য স্কোপ ভেরিয়েবল স্থাপনের পরিবর্তে, নির্দেশিকা আপনার জন্য সব কিছু করা ভাল:

angular.module('directive.loading', [])

    .directive('loading',   ['$http' ,function ($http)
    {
        return {
            restrict: 'A',
            link: function (scope, elm, attrs)
            {
                scope.isLoading = function () {
                    return $http.pendingRequests.length > 0;
                };

                scope.$watch(scope.isLoading, function (v)
                {
                    if(v){
                        elm.show();
                    }else{
                        elm.hide();
                    }
                });
            }
        };

    }]);

এই নির্দেশের সাথে, আপনাকে যা করতে হবে তা হ'ল যে কোনও লোডিং অ্যানিমেশন উপাদানটিকে একটি 'লোডিং' বৈশিষ্ট্য দেওয়া:

<div class="loading-spiner-holder" data-loading ><div class="loading-spiner"><img src="..." /></div></div>

পৃষ্ঠায় আপনার একাধিক লোডিং স্পিনার থাকতে পারে। এই স্পিনারগুলিকে কোথায় এবং কীভাবে লেআউট করবেন তা আপনার উপর নির্ভর করে এবং নির্দেশিকা স্বয়ংক্রিয়ভাবে আপনার জন্য এটি চালু / বন্ধ করে দেবে।

— ডেভিড লিন
সূত্র
এখানে "লোডিং" নির্দেশকে $ লোকেশন.পথ () সহ দু'বার কল করা হচ্ছে। প্রথমে বর্তমান পৃষ্ঠা এবং পরবর্তী গন্তব্য পৃষ্ঠার সাথে। এর কারণ কী হওয়া উচিত?
— সঞ্জয় ডি
চমৎকার। এবং এছাড়াও, আপনি ঘড়িতে জ্যাকারি টগল ব্যবহার করতে পারেন: elm.toggle (v)। আমার একটি $ টাইমআউট সেশন মনিটর রয়েছে এবং আমার জন্য আমার স্পিনারকে দেড় সেকেন্ড পরে দেখাতে হবে। স্পিনারকে আরও আস্তে আস্তে দেখানোর জন্য আমি ট্রান্সজিশন সহ একটি CSS প্রয়োগ করব।
— জোওও পোলো
7
যদি আপনি "elm.show () কোনও ফাংশন নয়" ত্রুটিটি পান তবে কৌনিক লোড করার আগে আপনাকে অবশ্যই jquery যুক্ত করতে হবে।
— morpheus05
আপনি যেভাবে স্কোপ করেন w ওয়াচটি আমার পক্ষে কাজ করে না। জেজেএম যেভাবে এটি করে সেভাবে আমাকে এটি করতে হয়েছিল (নামের চারপাশে '' ব্যবহার করে এবং স্কোপ উপসর্গটি বাদ দিয়ে)। কোন ধারণা কেন?
— কিংঅফ হাইপোক্রিটস
3
আমার যদি অ্যাসিঙ্ক দরকার হয় একাধিক বিভিন্ন অঞ্চল লোড করবেন?
— ভাদিম ফেরদারের
56

এখানে একটি উদাহরণ। এটি একটি বুল সহ সহজ এনজি-শো পদ্ধতি ব্যবহার করে।

এইচটিএমএল

<div ng-show="loading" class="loading"><img src="...">LOADING...</div>
<div ng-repeat="car in cars">
  <li>{{car.name}}</li>
</div>
<button ng-click="clickMe()" class="btn btn-primary">CLICK ME</button>

ANGULARJS

  $scope.clickMe = function() {
    $scope.loading = true;
    $http.get('test.json')
      .success(function(data) {
        $scope.cars = data[0].cars;
        $scope.loading = false;
    });
  }

অবশ্যই আপনি লোডিং বক্স এইচটিএমএল কোডটিকে একটি নির্দেশিকায় সরিয়ে নিতে পারেন, তারপরে স্কোপ.লোডিং $ ওয়াচ অন use ব্যবহার করুন। কোন ক্ষেত্রে:

এইচটিএমএল :

<loading></loading>

অ্যাঙ্গুলারজ ডিটারেক্টিভ :

  .directive('loading', function () {
      return {
        restrict: 'E',
        replace:true,
        template: '<div class="loading"><img src="..."/>LOADING...</div>',
        link: function (scope, element, attr) {
              scope.$watch('loading', function (val) {
                  if (val)
                      $(element).show();
                  else
                      $(element).hide();
              });
        }
      }
  })

প্লঙ্ক : http://plnkr.co/edit/AI1z21?p= পূর্বরূপ

— mnsr
সূত্র
আপনি যেভাবে স্কোপ করেন w ওয়াচটি আমার পক্ষে কাজ করে তা গ্রহণযোগ্য উত্তর পন্থা দেয় না।
— কিংঅফ হাইপোক্রিটিস
@ জজেএম এমন একটি দুর্দান্ত সমাধান 😊, দুর্ভাগ্যক্রমে এই সমাধানটি কাজ করছে না ui-router, কেন তা জানে না
— মো।
আমি আমার একটি প্রকল্পে এটি কাজ করেছিলাম, অন্য একটি প্রকল্পে আমি মনে করি ভারী loading=true
— এজাক্স
21

আমি এর জন্য এনজিপ্রোগ্রেস ব্যবহার করি ।

একবার আপনি আপনার এইচটিএমএলে স্ক্রিপ্ট / সিএসএস ফাইল অন্তর্ভুক্ত করলে আপনার নির্ভরতার সাথে 'এনজিপ্রোগ্রেস' যুক্ত করুন। একবার আপনি এটি করেন যে আপনি এই জাতীয় কিছু সেট আপ করতে পারেন যা কোনও রুট পরিবর্তন সনাক্ত হওয়ার পরে ট্রিগার হবে।

angular.module('app').run(function($rootScope, ngProgress) {
  $rootScope.$on('$routeChangeStart', function(ev,data) {
    ngProgress.start();
  });
  $rootScope.$on('$routeChangeSuccess', function(ev,data) {
    ngProgress.complete();
  });
});

এজ্যাক্স অনুরোধগুলির জন্য আপনি এর মতো কিছু করতে পারেন:

$scope.getLatest = function () {
    ngProgress.start();

    $http.get('/latest-goodies')
         .success(function(data,status) {
             $scope.latest = data;
             ngProgress.complete();
         })
         .error(function(data,status) {
             ngProgress.complete();
         });
};

কন্ট্রোলার নির্ভরতাগুলিতে 'এনজিপ্রোগ্রেস' যুক্ত করার আগে কেবল মনে রাখবেন। এবং আপনি যদি একাধিক এজেএক্স অনুরোধগুলি করছেন তবে 'এনজিপ্রোগ্রেস ডট কম' (); কল করার আগে আপনার এজেএক্স অনুরোধগুলি শেষ হয়ে গেলে ট্র্যাক রাখতে মূল অ্যাপ্লিকেশন স্কোপে একটি ইনক্রিমেন্টাল ভেরিয়েবল ব্যবহার করুন।

— নেজ কুট্টারিয়ান
সূত্র
15

মুলতুবি অনুরোধগুলি ব্যবহার করা সঠিক নয় কারণ কৌণিক ডকুমেন্টেশনে যেমন উল্লেখ করা হয়েছে, এই সম্পত্তিটি মূলত ডিবাগিংয়ের উদ্দেশ্যে ব্যবহৃত হয়।

আমি যা প্রস্তাব দিচ্ছি তা হ'ল কোনও সক্রিয় অ্যাসিঙ্ক কল আছে কিনা তা জানতে একটি ইন্টারসেপ্টার ব্যবহার করা। 

module.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push(function ($q, $rootScope) {
        if ($rootScope.activeCalls == undefined) {
            $rootScope.activeCalls = 0;
        }

        return {
            request: function (config) {
                $rootScope.activeCalls += 1;
                return config;
            },
            requestError: function (rejection) {
                $rootScope.activeCalls -= 1;
                return rejection;
            },
            response: function (response) {
                $rootScope.activeCalls -= 1;
                return response;
            },
            responseError: function (rejection) {
                $rootScope.activeCalls -= 1;
                return rejection;
            }
        };
    });
}]);

এবং তারপরে অ্যাক্টিভলগুলি একটি ঘড়ির মাধ্যমে নির্দেশনায় শূন্য কিনা তা পরীক্ষা করে দেখুন।

module.directive('loadingSpinner', function ($http) {
    return {
        restrict: 'A',
        replace: true,
        template: '<div class="loader unixloader" data-initialize="loader" data-delay="500"></div>',
        link: function (scope, element, attrs) {

            scope.$watch('activeCalls', function (newVal, oldVal) {
                if (newVal == 0) {
                    $(element).hide();
                }
                else {
                    $(element).show();
                }
            });
        }
    };
});
— মাহদী কে।
সূত্র
7

এটি করার সর্বোত্তম উপায় হ'ল কাস্টম নির্দেশাবলীর সাথে প্রতিক্রিয়া ইন্টারসেপ্টর ব্যবহার করা । Pub রুটস্কোপ। $ সম্প্রচার এবং $ রুটস্কোপ। Methods পদ্ধতিতে ব্যবহার করে পাব / সাব মেকানিজম ব্যবহার করে প্রক্রিয়াটি আরও উন্নত করা যায় ।

যেহেতু পুরো প্রক্রিয়াটি একটি ভাল লিখিত ব্লগ নিবন্ধে নথিভুক্ত করা হয়েছে , আমি এখানে আবার এটি পুনরাবৃত্তি করব না। আপনার প্রয়োজনীয় বাস্তবায়ন নিয়ে আসতে অনুগ্রহ করে নিবন্ধটি পড়ুন।

— এমএন ইসলাম শিহান
সূত্র
4

এই উত্তরের রেফারেন্সে

https://stackoverflow.com/a/17144634/4146239

আমার জন্য সেরা সমাধান তবে jQuery ব্যবহার এড়ানোর একটি উপায় আছে।

.directive('loading', function () {
      return {
        restrict: 'E',
        replace:true,
        template: '<div class="loading"><img src="http://www.nasa.gov/multimedia/videogallery/ajax-loader.gif" width="20" height="20" />LOADING...</div>',
        link: function (scope, element, attr) {
              scope.$watch('loading', function (val) {
                  if (val)
                      scope.loadingStatus = 'true';
                  else
                      scope.loadingStatus = 'false';
              });
        }
      }
  })

  .controller('myController', function($scope, $http) {
      $scope.cars = [];
      
      $scope.clickMe = function() {
        scope.loadingStatus = 'true'
        $http.get('test.json')
          .success(function(data) {
            $scope.cars = data[0].cars;
            $scope.loadingStatus = 'false';
        });
      }
      
  });
<body ng-app="myApp" ng-controller="myController" ng-init="loadingStatus='true'">
        <loading ng-show="loadingStatus" ></loading>
  
        <div ng-repeat="car in cars">
          <li>{{car.name}}</li>
        </div>
        <button ng-click="clickMe()" class="btn btn-primary">CLICK ME</button>
  
</body>
স্নিপেট প্রসারিত করুন

আপনাকে $ (উপাদান) প্রতিস্থাপন করতে হবে। শো (); এবং (উপাদান)। শো (); সাথে $ স্কোপ। লোডিংস্ট্যাটাস = 'সত্য'; এবং $ স্কোপ। লোডিংস্ট্যাটাস = 'মিথ্যা';

তদ্ব্যতীত, আপনাকে উপাদানটির এনজি-শো বৈশিষ্ট্যটি সেট করতে এই পরিবর্তনশীলটি ব্যবহার করতে হবে।

— Karsus
সূত্র
4

টাইপস্ক্রিপ্ট এবং কৌণিক প্রয়োগ

নির্দেশ

((): void=> {
    "use strict";
    angular.module("app").directive("busyindicator", busyIndicator);
    function busyIndicator($http:ng.IHttpService): ng.IDirective {
        var directive = <ng.IDirective>{
            restrict: "A",
            link(scope: Scope.IBusyIndicatorScope) {
                scope.anyRequestInProgress = () => ($http.pendingRequests.length > 0);
                scope.$watch(scope.anyRequestInProgress, x => {            
                    if (x) {
                        scope.canShow = true;
                    } else {
                        scope.canShow = false;
                    }
                });
            }
        };
        return directive;
    }
})();

ব্যাপ্তি

   module App.Scope {
        export interface IBusyIndicatorScope extends angular.IScope {
            anyRequestInProgress: any;
            canShow: boolean;
        }
    }

টেমপ্লেট

<div id="activityspinner" ng-show="canShow" class="show" data-busyindicator>
</div>

CSS
#activityspinner
{
    display : none;
}
#activityspinner.show {
    display : block;
    position : fixed;
    z-index: 100;
    background-image : url('data:image/gif;base64,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') 
    -ms-opacity : 0.4;
    opacity : 0.4;
    background-repeat : no-repeat;
    background-position : center;
    left : 0;
    bottom : 0;
    right : 0;
    top : 0;
}
— কোড-ইজেড
সূত্র
3

যদি আপনি রেস্টাঙ্গুলার ব্যবহার করেন (যা দুর্দান্ত) আপনি এপিআই কল করার সময় একটি অ্যানিমেশন তৈরি করতে পারেন। এখানে আমার সমাধান। একটি প্রতিক্রিয়া ইন্টারসেপ্টার এবং একটি অনুরোধ ইন্টারসেপ্টার যুক্ত করুন যা একটি রুটস্কোপ সম্প্রচার প্রেরণ করে। তারপরে সেই প্রতিক্রিয়া এবং অনুরোধ শোনার জন্য একটি নির্দেশিকা তৈরি করুন:

         angular.module('mean.system')
  .factory('myRestangular',['Restangular','$rootScope', function(Restangular,$rootScope) {
    return Restangular.withConfig(function(RestangularConfigurer) {
      RestangularConfigurer.setBaseUrl('http://localhost:3000/api');
      RestangularConfigurer.addResponseInterceptor(function(data, operation, what, url, response, deferred) {
        var extractedData;
        // .. to look for getList operations
        if (operation === 'getList') {
          // .. and handle the data and meta data
          extractedData = data.data;
          extractedData.meta = data.meta;
        } else {
          extractedData = data.data;
        }
        $rootScope.$broadcast('apiResponse');
        return extractedData;
      });
      RestangularConfigurer.setRequestInterceptor(function (elem, operation) {
        if (operation === 'remove') {
          return null;
        }
        return (elem && angular.isObject(elem.data)) ? elem : {data: elem};
      });
      RestangularConfigurer.setRestangularFields({
        id: '_id'
      });
      RestangularConfigurer.addRequestInterceptor(function(element, operation, what, url) {
        $rootScope.$broadcast('apiRequest');
        return element;
      });
    });
  }]);

নির্দেশটি এখানে:

        angular.module('mean.system')
  .directive('smartLoadingIndicator', function($rootScope) {
    return {
      restrict: 'AE',
      template: '<div ng-show="isAPICalling"><p><i class="fa fa-gear fa-4x fa-spin"></i>&nbsp;Loading</p></div>',
      replace: true,
      link: function(scope, elem, attrs) {
        scope.isAPICalling = false;

        $rootScope.$on('apiRequest', function() {
          scope.isAPICalling = true;
        });
        $rootScope.$on('apiResponse', function() {
          scope.isAPICalling = false;
        });
      }
    };
  })
;
— Enkode
সূত্র
যে কোনও এপিআই প্রতিক্রিয়া অ্যানিমেশনটিকে হত্যা করবে। অনুরোধ - প্রতিক্রিয়া সম্পর্কে আপনার অতিরিক্ত তথ্য সঞ্চয় করা উচিত এবং কেবলমাত্র সেই প্রতিক্রিয়ার জন্য প্রতিক্রিয়া জানাতে হবে যা অনুরোধের মাধ্যমে সূচনা হয়েছিল।
— Krzysztof সাফজানভস্কি
3

এটি আপনার "app.config" এ অন্তর্ভুক্ত করুন:

 $httpProvider.interceptors.push('myHttpInterceptor');

এবং এই কোড যুক্ত করুন:

app.factory('myHttpInterceptor', function ($q, $window,$rootScope) {
    $rootScope.ActiveAjaxConectionsWithouthNotifications = 0;
    var checker = function(parameters,status){
            //YOU CAN USE parameters.url TO IGNORE SOME URL
            if(status == "request"){
                $rootScope.ActiveAjaxConectionsWithouthNotifications+=1;
                $('#loading_view').show();
            }
            if(status == "response"){
                $rootScope.ActiveAjaxConectionsWithouthNotifications-=1;

            }
            if($rootScope.ActiveAjaxConectionsWithouthNotifications<=0){
                $rootScope.ActiveAjaxConectionsWithouthNotifications=0;
                $('#loading_view').hide();

            }


    };
return {
    'request': function(config) {
        checker(config,"request");
        return config;
    },
   'requestError': function(rejection) {
       checker(rejection.config,"request");
      return $q.reject(rejection);
    },
    'response': function(response) {
         checker(response.config,"response");
      return response;
    },
   'responseError': function(rejection) {
        checker(rejection.config,"response");
      return $q.reject(rejection);
    }
  };
});
— BratisLatas
সূত্র
2

কৌণিক-ব্যস্ত ব্যবহার করুন :

আপনার অ্যাপ্লিকেশন / মডিউল হিসাবে সিজিবাসি যুক্ত করুন:

angular.module('your_app', ['cgBusy']);

আপনার প্রতিশ্রুতি এতে যুক্ত করুন scope:

function MyCtrl($http, User) {
  //using $http
  this.isBusy = $http.get('...');
  //if you have a User class based on $resource
  this.isBusy = User.$save();
}

আপনার এইচটিএমএল টেমপ্লেটে:

<div cg-busy="$ctrl.isBusy"></div>
— krl
সূত্র
2

এছাড়াও, একটি দুর্দান্ত ডেমো রয়েছে যা দেখায় যে আপনি কীভাবে Angularjsআপনার প্রকল্পে অ্যানিমেশন ব্যবহার করতে পারেন ।

লিঙ্কটি এখানে (উপরের বাম কোণে দেখুন) ।

এটি একটি উন্মুক্ত উত্স। ডাউনলোড করার লিঙ্কটি এখানে

এবং এখানে টিউটোরিয়ালের লিঙ্কটি রয়েছে ;

আমার বক্তব্যটি হল, এগিয়ে যান এবং উত্স ফাইলগুলি ডাউনলোড করুন এবং তারপরে তারা স্পিনারকে কীভাবে প্রয়োগ করেছে তা দেখুন। তারা কিছুটা ভাল অ্যাপ্রোচ ব্যবহার করতে পারে। সুতরাং, এই প্রকল্পটি চেকআউট করুন।

— ইদ্রিস খান
সূত্র
1

এখানে সাধারণ ইন্টারসেপ্টারের উদাহরণ হিসাবে, আমি যখন অ্যাজাক্স শুরু হয় তখন আমি ওয়েটে মাউস সেট করি এবং এজাক্স শেষ হওয়ার পরে এটি অটোতে সেট করে।

$httpProvider.interceptors.push(function($document) {
return {
 'request': function(config) {
     // here ajax start
     // here we can for example add some class or show somethin
     $document.find("body").css("cursor","wait");

     return config;
  },

  'response': function(response) {
     // here ajax ends
     //here we should remove classes added on request start

     $document.find("body").css("cursor","auto");

     return response;
  }
};
});

কোডটি অ্যাপ্লিকেশন কনফিগারেশনে যুক্ত করতে হবে app.config। আমি লোডিংয়ের স্থিতিতে মাউস কীভাবে পরিবর্তন করব তা দেখিয়েছি কিন্তু সেখানে কোনও লোডার সামগ্রী দেখানো / আড়াল করা বা কিছু সিএসএস শ্রেণি যুক্ত করা বা অপসারণ করা সম্ভব যা লোডার দেখানো হচ্ছে।

ইন্টারসেপ্টর প্রতিটি এজ্যাক্স কলটিতে চলবে, তাই প্রতিটি এইচপি কলটিতে বিশেষ বুলিয়ান ভেরিয়েবল ($ স্কোপ। লোডিং = সত্য / মিথ্যা ইত্যাদি) তৈরি করার দরকার নেই।

ইন্টারসেপ্টর কৌণিক jqLite https://docs.angularjs.org/api/ng/function/angular.element এ বিল্ট ব্যবহার করছে যাতে জেকুয়ের দরকার নেই।

— ম্যাকিয়েজ সিকোড়া
সূত্র
1

শো এবং আকারের বৈশিষ্ট্যগুলির সাথে একটি নির্দেশিকা তৈরি করুন (আপনি আরও যুক্ত করতে পারেন) 

    app.directive('loader',function(){
    return {
    restrict:'EA',
    scope:{
        show : '@',
      size : '@'
    },
    template : '<div class="loader-container"><div class="loader" ng-if="show" ng-class="size"></div></div>'
  }
})

এবং এইচটিএমএল হিসাবে হিসাবে ব্যবহার করুন 

 <loader show="{{loader1}}" size="sm"></loader>

ইন প্রদর্শনী পরিবর্তনশীল পাস সত্য যখন কোন প্রতিশ্রুতি চলছে এবং যে মিথ্যা যখন অনুরোধ সম্পন্ন হয়। অ্যাক্টিভ ডেমো - জেএসফিডেলে কৌণিক লোডার নির্দেশকের উদাহরণ ডেমো

— পার্থ রায়
সূত্র
0

আমি @ ডেভিডলিনের উত্তরটিকে সহজ করার জন্য কিছুটা তৈরি করেছি - নির্দেশে jQuery এর উপর যে কোনও নির্ভরতা অপসারণ করেছি । আমি এটি কোনও উত্পাদন অ্যাপ্লিকেশনে ব্যবহার করার সাথে সাথে এটির কাজগুলি নিশ্চিত করতে পারি

function AjaxLoadingOverlay($http) {

    return {
        restrict: 'A',
        link: function ($scope, $element, $attributes) {

            $scope.loadingOverlay = false;

            $scope.isLoading = function () {
                return $http.pendingRequests.length > 0;
            };

            $scope.$watch($scope.isLoading, function (isLoading) {
                $scope.loadingOverlay = isLoading;
            });
        }
    };
}

আমি ng-showলুকিয়ে / দেখানোর জন্য jQuery কলের পরিবর্তে একটি ব্যবহার করি <div>।

এখানে <div>যা আমি খোলার <body>ট্যাগের ঠিক নীচে রেখেছি :

<div ajax-loading-overlay class="loading-overlay" ng-show="loadingOverlay">
    <img src="Resources/Images/LoadingAnimation.gif" />
</div>

এবং এখানে এমন সিএসএস রয়েছে যা $ HTTP কল করার সময় ইউআইকে ব্লক করতে ওভারলে সরবরাহ করে:

.loading-overlay {
    position: fixed;
    z-index: 999;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.loading-overlay:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading-overlay:not(:required) {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

সিএসএস ক্রেডিট @ স্টিভ সিগারের - তার পোস্টে যায়: https://stackoverflow.com/a/35470281/335545

— বার্ন
সূত্র
0

আপনি একটি শর্ত যুক্ত করতে পারেন এবং তারপরে এটি রুটস্কোপের মাধ্যমে পরিবর্তন করতে পারেন। আপনার এজাক্স অনুরোধের আগে, আপনি কেবল $ রুটস্কোপ $ ইমিট ('স্টপলোডার') কল করবেন;

angular.module('directive.loading', [])
        .directive('loading',   ['$http', '$rootScope',function ($http, $rootScope)
        {
            return {
                restrict: 'A',
                link: function (scope, elm, attrs)
                {
                    scope.isNoLoadingForced = false;
                    scope.isLoading = function () {
                        return $http.pendingRequests.length > 0 && scope.isNoLoadingForced;
                    };

                    $rootScope.$on('stopLoader', function(){
                        scope.isNoLoadingForced = true;
                    })

                    scope.$watch(scope.isLoading, function (v)
                    {
                        if(v){
                            elm.show();
                        }else{
                            elm.hide();
                        }
                    });
                }
            };

        }]);

এটি অবশ্যই সর্বোত্তম সমাধান নয় তবে এটি এখনও কার্যকর হবে।

— User_3535
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.