在ionic，angularjs中隐藏后退按钮

  • Z时代
  • 2024-01-10
  • 分类：问答

我需要在不同的页面/视图中显示和隐藏后退按钮。我从贾斯汀·诺埃尔那里得到了参考：

<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('AppCtrl', function($scope, $location) {
   var path = $location.path();
   if (path.indexOf('submit') != -1)
     $scope.hideBackButton = true;
   else
     $scope.hideBackButton = false;
})

但这是行不通的，因为控制器仅被调用一次，而在不同状态下的视图改变时则不会。同样，从其他控制器（链接到不同的状态）更改$

scope.hideBackButton的值对按钮显示没有任何影响。

谁能告诉我如何在每个导航上切换后退按钮显示。我在这里想念什么？

回答：

我今天有完全一样的问题。

最简单的解决方案是使用$ ionicNavBarDelegate：

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

您还可以将hideBackButton值包装在object中，代码将起作用：

.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观察者的创建方式。该方法的缺点是按钮的隐藏不如其他离子溶液平滑。

以防万一，这是您的html外观：

第一种解决方案：

<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中隐藏后退按钮 的全部内容， 来源链接： utcz.com/qa/397251.html

回到顶部