Ngăn xếp lịch sử Ionic khi sử dụng menu và tab bên

Question

Tôi đang gặp một số vấn đề với ionic và ngăn xếp lịch sử của nó khi sử dụng các menu và tab bên.

Tôi tạo ra một ví dụ plunker đây: http://embed.plnkr.co/XK6seY9mDypTW6GcsCpj/preview

bước để làm theo để có được các vấn đề:

1. menu Open bên
2. Navigate to "Thầy List"
3. Chọn một trong các các mặt hàng
4. Bạn sẽ được chuyển hướng đến tab dữ liệu chung của trang chi tiết

Vấn đề là không có nút quay lại được hiển thị trong điều hướng bằng chính ion. Tôi tạo ra một nút quay lại của riêng mà gọi $ ionicGoBack ($ event) để xem liệu ion có ngăn xếp lịch sử hay không. Nhưng khi nhấp vào nút này, bạn sẽ thấy rằng ion không điều hướng trở lại danh sách chính, thay vào đó bạn sẽ ở lại trên tab dữ liệu chung của trang chi tiết.

Có ai cho tôi biết vấn đề là gì không? Tôi biết các tab có ngăn xếp lịch sử của riêng mình, tuy nhiên tab này nên biết tổ tiên của nó, hay tôi sai?

Rất cám ơn trước sự giúp đỡ của bạn!

Trân trọng

Answer 1

Mỗi tab ion có it's own history stack. Khi bạn nhấn một mục trong danh sách và đi đến dữ liệu chung /: id, bạn đang tạo một ngăn xếp lịch sử mới - thông báo mỗi tab có chế độ xem ion-nav riêng của nó.

Tôi đã thực hiện điều này trước đây và chỉ sử dụng các kiểu tab css và đính kèm ng-click hoặc ng-href vào mỗi tab và tiếp tục làm việc ngăn xếp lịch sử hiện tại và có thể sử dụng lại thanh tab của bạn làm mẫu hoặc một chỉ thị.

Hy vọng điều đó sẽ hữu ích!

Answer 2

Điều này là do thực tế là chỉ thị đóng menu đặt lại ngăn xếp lịch sử (như được giải thích here).

Nếu bạn xóa "menu-close" khỏi các phần tử của mình, thì bạn giữ lịch sử, nhưng sẽ mất một số hành vi mong đợi.

Là một giải pháp, bạn có thể phát triển chỉ thị của riêng bạn (giả sử "menu-close-keep-history") để thay thế "menu-close".

myModule.directive('menuCloseKeepHistory', ['$ionicHistory', function($ionicHistory) { 
    return { 
     restrict: 'AC', 
     link: function($scope, $element) { 
      $element.bind('click', function() { 
       var sideMenuCtrl = $element.inheritedData('$ionSideMenusController'); 
       if (sideMenuCtrl) { 
        $ionicHistory.nextViewOptions({ 
         historyRoot: false, 
         disableAnimate: true, 
         expire: 300 
        }); 
        sideMenuCtrl.close(); 
       } 
      }); 
     } 
    }; 
}]); 

Điều này cần thực hiện thủ thuật.

Answer 3

Chỉ là một hack nhỏ mà tôi đã phát hiện ra. Nếu bạn không muốn các tab có ngăn xếp lịch sử riêng. Chỉ cần thêm một div trên các tab ion của bạn.

EG:

<div ng-show="vm.loading"> 
    <div style="width: 50px; margin: 0 auto;"> 
    <ion-spinner></ion-spinner> 
    </div> 
</div> 

<ion-tabs data-ng-controller="something as vm" ng-hide="vm.loading"> 

Answer 4

Vâng, thay vì chỉ tùy chỉnh, người ta có thể sử dụng menu-toggle thay vì menu-close Khi bạn sử dụng

menu bật tắt

ion theo dõi n của bạn lịch sử hàng không

Answer 5

Bạn luôn có thể ghi đè $ ionicGoBack cho tất cả các trình điều khiển rồi đặt chế độ xem mặc định nếu historystack không có chế độ xem lại.

Ví dụ:

$rootScope.$ionicGoBack = function() { 
     if($ionicHistory.backView() == null || !angular.isDefined($ionicHistory.backView())){ 
      $state.go("app.default", {});   
     }else{ 
      $ionicHistory.goBack(); 
     } 
    };