CODEWITHSUNDEEP
angularjs
Science
Science

Reputation: 147

Hiding page loader only after completion of data load in the page view

Currently am working with angularjs. now i have an ng-click function,it is called when checkbox is checked or unchecked. i have a full page loader and when i click on the check box it will be displayed. It will be hidden only after loading the complete view. I tried this code and it is not working

here comes the click

<input type="checkbox"id="myId" ng-click="sampleClick(1)">

here is the js code

$scope.sampleClick = function(type) {

        var param       = new Object();
        param.type      = type;

        //side bar listing
        Data.post('url/testurl', param).then(function(data){
            $scope.all          = '';
            $scope.all          = angular.fromJson(data);

            console.log("Contents is trying to load.");
            $scope.$on('$viewContentLoaded',function(event, viewConfig){
                console.log("Contents did load.");
                $rootScope.setVariable = 1;
            });

        }, function (error) {
            $rootScope.setVariable = 1;         
        });

    }

I want to set the $rootScope.setVariable = 1 only when the view section is completely loaded.(and each time when I click on the check box)

Note : when I use $viewContentLoaded at the time of page load, it works without any issue. But when I use the same along with the ng-click function, i don't get any response.

Upvotes: 1

Views: 168

Answers (2)

Vishnumohan K
Vishnumohan K

Reputation: 26

If the view is rendered using ng-repeat, why can't you use ng-repeat directive to handle the end of render and then initiate a function call.

for example

<div ng-repeat="i in things" repeat-done>
// here you use i to render your filter with checkbox
</div>

and directive will look like

app.directive('repeatDone', function($rootScope) {
  return function(scope, element, attrs) {
    if (scope.$last){
        //set your variables or do you job
    }
  };
})

Upvotes: 1

Jaimin Raval
Jaimin Raval

Reputation: 156

You can set one flag you can set it value true/false.

for example(I am taking your example so you can understand it batter):- 

$scope.loading = false;
$scope.sampleClick = function(type) {

        var param       = new Object();
        param.type      = type;

        //side bar listing
        Data.post('url/testurl', param).then(function(data){
            $scope.all          = '';
            $scope.all          = angular.fromJson(data);

            console.log("Contents is trying to load.");
              $scope.loading = true;
            $scope.$on('$viewContentLoaded',function(event, viewConfig){
              $scope.loading = false;
                console.log("Contents did load.");
                $rootScope.setVariable = 1;
            });

        }, function (error) {
            $rootScope.setVariable = 1;         
        });

    }

here i have take $scope.loading variable which default value is false, when you click on checkbox then it will be set to true so at that time you can show the loader and when it get the data it will be set to false so it will stops loading.

I hope you understand.

Upvotes: 0

Related Questions