Załaduj dyrektywę po wywołaniu AJAX

Question

Mam zbudować dyrektywę dla stronicowania, która pobiera dwa argumenty; bieżąca strona i łączna liczba stron.

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

Problem jest, że będę tylko znać wartość numberOfPages po wywołania AJAX (poprzez NG-zasobu). Ale moja dyrektywa jest już renderowana przed wykonaniem połączenia AJAX.

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; 
    }); 
}); 

Wolę poczekać z renderowaniem mojego szablonu kontrolerów do czasu zakończenia wywołania AJAX.

Plan B polegałby na dołączeniu szablonu do szablonu dyrektyw po zakończeniu wywołania AJAX.

Utknąłem opracowując oba scenariusze.

Answer 1

Trzeba czekać na wartości za pomocą $watch funkcji takich jak:

<div before-today="old" watch-me="numberOfPages" >{{exampleDate}}</div> 

dyrektywę

angular.module('myApp').directive('myPagingDirective', [ 
    function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attr) { 


     scope.$watch(attr.watchMe,function(newValue,oldValue){ 
       //check new value to be what you expect. 
      if (newValue){   
        // your code goes here 
      } 
     }); 
     } 
    }; 
    } 
]); 

Imporant: Twój dyrektywa może używać samodzielnie zakres, ale nawet tak samo podstawa stoi.

Answer 2

Jeśli używasz resolve z ui-router, można mieć meta lub meta.number_of_pages wstrzykiwany w kontrolerze zanim będzie za widok zostanie wygenerowana.

//routes.js 
angular.module('app') 
    .state('some_route', { 
    url: '/some_route', 
    controller: 'MyController', 
    resolve: { 
     meta: ['MyResource', function (MyResource) { 
     return MyResource.query({ 
      "page": $scope.page, 
      "per_page": 100 
     }, function (response) { 
      return response.meta; 
     }); 
     }] 
    } 
    }); 

//controllers.js 
app.controller('MyController', function ($scope, $routeParams, meta) { 
    $scope.page = +$routeParams.page || 1, 
    $scope.numberOfPages = meta.number_of_pages; 
}); 

Answer 3

Ale nie jest to możliwe, aby tylko zapobiec renderowania aż wszystko odbywa

• myślę NG-jeśli to zrobi, w przeciwieństwie do NG-show/NG-hide, który właśnie zmień rzeczywisty wyświetlacz