AJAX调用后的Load指令

Question

我已经建立了一个带有两个参数的分页指令; 当前页面和总页数.

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

问题是我只会在AJAX调用之后知道numberOfPages的值(通过ng-resource).但是我的指令已经在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;
    });
});

我更喜欢等待渲染我的控制器模板,直到AJAX调用完成.

当AJAX调用完成时,Plan B将使用指令模板附加模板.

我无法解决这两种情况.

Answer 1

但是,只有在完成所有操作之后才能阻止渲染

• 我认为ng-if会这样做,与ng-show/ng-hide相反,它只会改变实际显示

Answer 2

您必须使用以下$watch函数等待值:

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

指示

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:你的指令可能使用一个孤立的范围,但即便如此,原则也是如此.