AJAX 调用后加载指令

Question

我已经建立了一个分页指令，它需要两个参数；当前页面和总页数。

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

问题是我只会在 AJAX 调用（通过 ng-resource）之后知道 numberOfPages 的值。但是我的指令在 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 调用完成。

B 计划是在 AJAX 调用完成时将模板附加到指令模板中。

我无法解决这两种情况。

Answer 1

如果您使用ui-router 中的resolve，您可以在视图渲染之前将meta 或meta.number_of_pages 注入控制器。

//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 2

但是在所有完成之前是否可以阻止渲染

• 我认为 ng-if 会这样做，而 ng-show/ng-hide 只会改变实际显示

Answer 3

您必须使用 $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
             }
        });
      } 
    };
  }
]);

重要提示：您的指令可能使用隔离范围，但即使如此，原则也是如此。