在ionic，angularjs中隐藏后退按钮 [英] hiding back button in ionic, angularjs
问题描述
我需要在不同的页面/视图中显示和隐藏后退按钮.我参考了 Justin Noel:
I need to show and hide back button in different pages/views. I took reference from Justin Noel:
<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>
应用控制器切换按钮显示:
App controller to toggle button display:
.controller('AppCtrl', function($scope, $location) {
var path = $location.path();
if (path.indexOf('submit') != -1)
$scope.hideBackButton = true;
else
$scope.hideBackButton = false;
})
但这不起作用，因为控制器只被调用一次，而不是在不同状态下的视图改变时调用.同样从其他控制器(链接到不同状态)更改 $scope.hideBackButton 的值不会对按钮显示产生任何影响.
But this doesnt work as controller is called only once but not at the change of view in different states. Also changing the value of $scope.hideBackButton from other controllers(linked to different states) does not have any effect on the button display.
谁能告诉我如何在每个导航上切换后退按钮显示.我在这里错过了什么?
Can anyone tell me how to toggle back-button display on each navigation. What am I missing here?
推荐答案
我今天遇到了完全相同的问题.
I had exactly same problem today.
最简单的解决方案是使用 $ionicNavBarDelegate:
Simplest solution is to use $ionicNavBarDelegate:
.controller('AppCtrl', function($scope, $location, $ionicNavBarDelegate) {
var path = $location.path();
if (path.indexOf('submit') != -1)
$ionicNavBarDelegate.showBackButton(false);
else
$ionicNavBarDelegate.showBackButton(true);
})
您还可以将 hideBackButton 值包装在对象中，您的代码将起作用:
You can also wrap hideBackButton value in object and your code will work:
.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;
})
它之所以有效是因为在 JS 中(就像在许多其他语言中一样)布尔值是按值传递的，而对象是按引用传递的，它会影响默认 Angular 观察者的创建方式.这种方法的缺点是按钮的隐藏不像其他离子解决方案那样平滑.
It works because in JS (as in many other languages) booleans are passed by value and object are passed by the referance and it affects how default Angular watchers are created. The downside of this method is that hidding of the button is not as smooth as in other ionic solutions.
以防万一，您的 html 应该是这样的:
Just in case, this is how your html should look like:
第一个解决方案:
<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>
第二种解决方案:
<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>
这篇关于在ionic，angularjs中隐藏后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
