ẩn nút quay lại trong ionic, angularjs

Tôi cần hiển thị và ẩn nút quay lại trong các trang/chế độ xem khác nhau. Tôi đã tham khảo từ Justin Noel:ẩn nút quay lại trong ionic, angularjs

<body ng-app="starter" ng-controller="AppCtrl"> 
    <ion-nav-bar class="bar-stable"> 
    <ion-nav-back-button hide-back-button="{{hideBackButton}}"> 
    </ion-nav-back-button> 
    </ion-nav-bar> 
</body>

điều khiển ứng dụng để chuyển đổi nút hiển thị:

.controller('AppCtrl', function($scope, $location) { 
    var path = $location.path(); 
    if (path.indexOf('submit') != -1) 
    $scope.hideBackButton = true; 
    else 
    $scope.hideBackButton = false; 
})

Nhưng công việc doesnt này như điều khiển được gọi là một lần duy nhất nhưng không phải ở việc thay đổi quan điểm trong tiểu bang khác nhau. Ngoài ra việc thay đổi giá trị của $ scope.hideBackButton từ các bộ điều khiển khác (được liên kết với các trạng thái khác nhau) không có bất kỳ ảnh hưởng nào trên màn hình hiển thị nút.

Bất kỳ ai cũng có thể cho tôi biết cách chuyển đổi hiển thị nút quay lại trên mỗi điều hướng. Tôi đang thiếu gì ở đây?

Nguồn

2015-02-04 vikramaditya234

Tôi có chính xác cùng một vấn đề ngày hôm nay.

giải pháp

đơn giản nhất là sử dụng $ ionicNavBarDelegate:

.controller('AppCtrl', function($scope, $location, $ionicNavBarDelegate) { 
    var path = $location.path(); 
    if (path.indexOf('submit') != -1) 
    $ionicNavBarDelegate.showBackButton(false); 
    else 
    $ionicNavBarDelegate.showBackButton(true); 
})

Bạn cũng có thể quấn giá trị hideBackButton trong đối tượng và mã của bạn sẽ làm việc:

.controller('AppCtrl', function($scope, $location) { 
    var path = $location.path(); 
    $scope.options = $scope.options || {}; 
    if (path.indexOf('submit') != -1) 
    $scope.options.hideBackButton = true; 
    else 
    $scope.options.hideBackButton = false; 
})

Nó hoạt động bởi vì trong JS (như trong nhiều khác ngôn ngữ) booleans được truyền theo giá trị và đối tượng được truyền qua tham chiếu và nó ảnh hưởng đến cách các trình theo dõi góc mặc định được tạo ra. Nhược điểm của phương pháp này là việc che giấu nút không mượt mà như trong các giải pháp ion khác.

Chỉ trong trường hợp, đây là cách html của bạn sẽ giống như thế:

giải pháp 1:

<body ng-app="starter" ng-controller="AppCtrl"> 
    <ion-nav-bar class="bar-stable"> 
    <ion-nav-back-button> 
    </ion-nav-back-button> 
    </ion-nav-bar> 
</body>

giải pháp thứ 2:

<body ng-app="starter" ng-controller="AppCtrl"> 
    <ion-nav-bar class="bar-stable"> 
    <ion-nav-back-button hide-back-button="{{options.hideBackButton}}"> 
    </ion-nav-back-button> 
    </ion-nav-bar> 
</body>

Nguồn

2015-03-03 11:11:15 Vees

Đối với tôi nó chỉ làm việc thêm the-back-button ẩn trên thẻ ion-view, như trên codepen này: http://codepen.io/calendee/pen/ eusfl – gmartini20

Bạn có thể thay đổi các thiết lập bộ nhớ cache để khi trang web được nạp lại bộ điều khiển được gọi là một lần nữa: http://ionicframework.com/docs/api/directive/ionNavView/

Nguồn

2015-02-06 10:12:32 Toxus

$ionicHistory.nextViewOptions({ 
    disableBack: true 
    }); 

    $state.go('app.home');

Nguồn

2015-04-07 11:09:22 BratisLatas

$ ionicViewService không còn được dùng nữa. Sử dụng $ ionicHistory.nextViewOptions – BratisLatas

Đây là giải pháp thực sự hoạt động. –

Tôi cũng xác nhận, giải pháp này hoạt động! –

Các hide-back-button thuộc tính trên <ion-view> làm lừa cho tôi: <ion-view hide-back-button="true">

Xem tài liệu chính thức here.

Nguồn

2015-06-19 00:00:48 nfgf

Giải pháp tốt nhất nếu bạn chỉ muốn ẩn nút quay lại mà không có bất kỳ điều kiện nào. Cảm ơn. –

Cách rất đơn giản để đạt được điều này là áp dụng chỉ thị menu-close cho nút/neo của bạn. Về mặt kỹ thuật, nó có nghĩa là để đóng menu, nhưng bạn có thể sử dụng nó trên bất kỳ liên kết nào và nó sẽ bỏ qua hoạt ảnh slide & sẽ không hiển thị nút quay lại.

<a menu-close href="#/home">Home</a>

http://ionicframework.com/docs/api/directive/menuClose/

Nguồn

2015-07-21 06:59:03

Tính năng này có hoạt động với ui-sref và ng-click không? – Justin

Nó hoạt động với ui-sref, nhưng 'menu-close' thực sự xóa lịch sử, đó là lý do tại sao bạn không thấy nút quay lại (không có trạng thái ngược). Tôi nghĩ câu trả lời của nfgf là tốt hơn. –

Các hide-back-button thuộc tính nên được đặt trên ion-view thẻ.

Nguồn

2016-07-05 15:57:24

$ionicHistory.nextViewOptions({ 
      disableBack: false, 
      historyRoot: true 
     });

Điều đó có vẻ là một lựa chọn tốt để sử dụng, hoạt động tốt cho tôi.

Nguồn

2016-10-13 11:48:19

Ionic 2 & 3: <ion-navbar [hideBackButton]="true">

Nguồn

2018-01-09 06:59:19 TaeKwonJoe

công việc của nó đối với tôi – core114

ẩn nút quay lại trong ionic, angularjs

Trả lời

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