Chỉ thị tải sau khi gọi AJAX

Question

Tôi đã xây dựng một chỉ thị cho phân trang có hai đối số; trang hiện tại và tổng số trang.

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

Vấn đề là tôi sẽ chỉ biết giá trị của numberOfPages sau khi một cuộc gọi AJAX (qua ng tài nguyên). Nhưng chỉ thị của tôi đã được trả trước khi cuộc gọi AJAX được thực hiện.

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

Tôi thích chờ kết xuất mẫu bộ điều khiển cho đến khi cuộc gọi AJAX kết thúc.

Gói B sẽ thêm mẫu với mẫu chỉ thị khi thực hiện cuộc gọi AJAX.

Tôi gặp khó khăn khi làm việc cả hai trường hợp.

Answer 1

Bạn phải đợi cho giá trị sử dụng một $watch chức năng như:

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

Chỉ

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: Chỉ thị của bạn có thể sử dụng một phạm vi riêng biệt nhưng ngay cả như vậy cùng nguyên tắc là viết tắt.

Answer 2

Nếu bạn sử dụng resolve từ ui-router, bạn có thể có meta hoặc meta.number_of_pages tiêm trong điều khiển của bạn TRƯỚC xem nó được kết xuất.

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

Nhưng không phải là nó có thể chỉ ngăn chặn sự vẽ cho đến khi tất cả được thực hiện

• Tôi nghĩ rằng ng-nếu có thể làm điều đó, trái với ng-show/ng-hide mà chỉ thay đổi hiển thị thực tế