2013-08-28 18 views
5

Sử dụng AngularJS 1.2Làm cách nào để phát sóng từ trình chặn chặn http?

đánh chặn của tôi trông như thế này:

 $httpProvider.interceptors.push(['$q', '$log', '$rootScope', function ($q, $log, $rootScope) { 
      return { 
       'request': function(config) { 
        $rootScope.$broadcast('spin'); 
        console.info('request!'); 
        return config || $q.when(config); 
       }, 
... 

Trong điều khiển nav của tôi (mà xử lý và liên kết với các bộ nạp/spinner để xem):

$rootScope.$watch('spin', function(event) { 
    console.info('spin'); 
    $scope.spinner++; 
}); 

Việc phát sóng dường như chỉ xảy ra một lần ở cuối tất cả các câu trả lời nhận được, mặc dù tôi có thể thấy nhiều yêu cầu ! trong nhật ký bảng điều khiển.

Tôi phải quản lý bộ nạp/tải toàn cục của mình như thế nào?

EDIT Tôi muốn hiển thị trình tải/thanh công cụ trong thanh điều hướng của mình bất cứ khi nào dữ liệu đang được tải.

+0

những gì bạn muốn đạt được sử dụng này –

+0

@Ajaybeniwal chỉnh sửa: mục đích bổ sung – Tjorriemorrie

Trả lời

4

Chức năng $watch không nghe tin nhắn quảng bá. Nó theo dõi những thay đổi trên phạm vi. Trong trường hợp này, bạn đang gọi một hàm bất cứ khi nào $rootScope.spin thay đổi, được gọi (theo mặc định) ngay lập tức, đó là lý do tại sao bạn được gọi một lần.

Chức năng $on là những gì bạn muốn ở đây, vì đó là những gì sẽ lắng nghe các sự kiện phát sóng.

$rootScope.$on('spin', function(msg, data) { 
    console.info('spin'); 
    $scope.spinner++; 
}); 

tôi đã đặt cùng một ví dụ làm việc hoàn chỉnh nếu bạn tò mò:

http://codepen.io/BrianGenisio/pen/wIBHz

3

Thay vì sử dụng quan sát bạn chỉ nên sử dụng trên trong hàm mô-đun chạy

angular.module('test',[]).run(['$rootScope' function ($rootScope) { 
    $rootScope.$on("$spin", function() { 
     // set the spinner here 
    }); 

}]); 
+0

Tôi có thể tìm thêm ở đâu thông tin về 'run' và' $ on' và '$ broadcast'? – Tjorriemorrie

+0

http://code.angularjs.org/1.2.0rc1/docs/api/angular.Module http://code.angularjs.org/1.2.0rc1/docs/api/ng.$rootScope.Scope –

Các vấn đề liên quan