在离子隐藏返回按钮，angularjs [英] hiding back button in ionic, angularjs
问题描述
我需要显示在不同的页面/视图隐藏后退按钮。我从贾斯汀诺埃尔参考：
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价值和你的code将工作：
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（如在许多其他语言）布尔值是按值和对象传递是由全球化志愿服务青年过去了，它会影响如何创建默认的角度观察。
这种方法的缺点是按键hidding并不像在其他离子溶液一样光滑。
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:
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>
第二个解决方案：
2nd solution:
<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>
这篇关于在离子隐藏返回按钮，angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
