ion-nav-back-button
作者:本站编辑 发布时间:2015-11-24 来源:本站原创
点击数:
在一个ionNavBar
中创建一个按钮。
当用户在当前导航堆栈能够后退时,将显示后退按钮。
默认情况下,当点击后退按钮时。如果你想了解更高级的行为,请参阅下面的例子。
用法
默认按钮动作:
<ion-nav-bar> <ion-nav-back-button class="button-clear"> <i class="ion-arrow-left-c"></i> 后退 </ion-nav-back-button> </ion-nav-bar>
自定义点击动作,用 $ionicNavBarDelegate
:
<ion-nav-bar ng-controller="MyCtrl"> <ion-nav-back-button class="button-clear" ng-click="canGoBack && goBack()"> <i class="ion-arrow-left-c"></i> 后退 </ion-nav-back-button> </ion-nav-bar>
function MyCtrl($scope, $ionicNavBarDelegate) { $scope.goBack = function() { $ionicNavBarDelegate.back(); }; }
在后退按钮上显示上一个标题,也用$ionicNavBarDelegate
。
<ion-nav-bar ng-controller="MyCtrl"> <ion-nav-back-button class="button-icon"> <i class="icon ion-arrow-left-c"></i>{{getPreviousTitle() || 'Back'}} </ion-nav-back-button> </ion-nav-bar>
function MyCtrl($scope, $ionicNavBarDelegate) { $scope.getPreviousTitle = function() { return $ionicNavBarDelegate.getPreviousTitle(); }; }