Load directive after AJAX call

Question

I have build a directive for pagination that takes two arguments; the current page and the total number of pages.

<pagination page="page" number-of-pages="numberOfPages"></pagination>

The issue is that I will only know the value of numberOfPages after an AJAX call (through ng-resource). But my directive is already rendered before that the AJAX call is done.

app.controller('MyController', function ($scope, $routeParams) {
    $scope.page = +$routeParams.page || 1,
    $scope.numberOfPages = 23; // This will work just fine

    MyResource.query({
        "page": $scope.page,
        "per_page": 100
    }, function (response) {
        //This won't work since the directive is already rendered
        $scope.numberOfPages = response.meta.number_of_pages;
    });
});

I prefer to wait with the rendering of my controllers template until the AJAX call is finished.

Plan B would be to append the template with the directives template when the AJAX call is done.

I'm stuck working out both scenarios.

Answer 1

But isn't it possible to just prevent the rendering until all is done

• I think ng-if would do that, contrary to ng-show/ng-hide which just alter the actual display