CODEWITHSUNDEEP
javascriptangularjsionic-framework
OliverJ90
OliverJ90

Reputation: 1321

Angular show/hide working only on second function call, apply/digest issue?

I have the following in a controller, which is designed to show the content after it's loaded. Should in theory be pretty simple but is not playing ball, so I'm trying to understand what I'm doing wrong. This is for a view containing an ionic slide box which is what I'm trying to hide until the data is loaded, and with an ion-refresher for pull to refresh, hence the $scope.broadcast('scroll.refreshComplete');

    //initial controller vars:
    $scope.data = {};
    $scope.data.loading = true;
    $scope.data.user = 1;
    $scope.data.week = {};

    $scope.data.getContent = function() {
            var now = new Date().getTime();
            serverRequestFactory.getWeek(now)
            .success(function(response){
                    $scope.data.week = response;
                    $scope.data.loading = false;
                    $ionicSlideBoxDelegate.update();
                    $scope.$broadcast('scroll.refreshComplete');
                    })
            .error(function(response){
                   $scope.data.loading = false;
                   $scope.$broadcast('scroll.refreshComplete');
                   })
            }

            if($scope.data.user == 1){
            //calls above on view load
                $scope.data.getContent();
                //$scope.data.getContent();
            }

The weird thing is the above works if I uncomment the second call to $scope.data.getContent() but I don't know why. I've tried $scope.apply() both before and after setting the $scope.data.week object and the update of the slide box delegate. Where's my error?

EDIT: So I just added an ng-repeat directive to one of the slide box items:

<ion-slide-box on-slide-changed="slideHasChanged($index)" ng-hide="data.loading">
            <ion-slide class="customSlidePadding" ng-repeat="item in data.week.items">

And now the entire slide box respects the initial ng-hide value and shows up without a second function call... There surely has to be an angular reason adding the directive to a nested item in the hidden slide box makes it work?

Upvotes: 1

Views: 682

Answers (2)

jusopi
jusopi

Reputation: 6813

Unless your template is actually calling your function via an event handler 

on-event="data.getContent()"

or via some binding mechanism (which I don't recommend)

<p>{{data.getContent()}}

Then you aren't actually calling this method. Nothing I've seen in the supplied code is actually calling this, you've only defined the method which calls itself in the if block.

Try explicitly calling it:

$scope.data.getContent = function() {
        var now = new Date().getTime();
        serverRequestFactory.getWeek(now)
        .success(function(response){
                $scope.data.week = response;
                $scope.data.loading = false;
                $ionicSlideBoxDelegate.update();
                $scope.$broadcast('scroll.refreshComplete');
                })
        .error(function(response){
               $scope.data.loading = false;
               $scope.$broadcast('scroll.refreshComplete');
               })
        }

        if($scope.data.user == 1){
        //calls above on view load
            $scope.data.getContent();
            //$scope.data.getContent();
        }
}

//explicitly calling
$scope.data.getContent();

Upvotes: 0

Miguel Lattuada
Miguel Lattuada

Reputation: 5417

If you are using $scope.data.week on your view you should initialize it, otherwise angular does not create $watch over it after the first call.

Just do.

$scope.data.week = []; //or whatever data you want...

you should do this before calling the async request.

Upvotes: 0

Related Questions