Angularjs – Load directive after AJAX call


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) {
    $ = +$ || 1,
    $scope.numberOfPages = 23; // This will work just fine

        "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.

Best Solution

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
Related Question