【问题标题】:how to override the default back button in ionic如何覆盖离子中的默认后退按钮
【发布时间】:2016-03-23 05:30:31
【问题描述】:

我有三个视图播放列表、播放列表和媒体播放器。

在我的项目中,我默认返回按钮。我正在调试一个 Play 商店应用程序,我查看页面的方向是播放列表--> 播放列表--> 媒体播放器。此外,我对所有视图都有单独的控制器,但我只在播放列表和媒体播放器页面中获得了默认的后退按钮。

1).点击播放列表页面的后退按钮进入播放列表页面,所以没有问题。

2).单击媒体播放器页面中的后退按钮转到播放列表页面,但我需要转到播放列表。

这里有一些我已经浏览过的链接,但我无法理解

Soft navigation bar button - override $rootScope.$ionicGoBack()
Hard Android button - use $ionicPlatform.registerBackButtonAction()

1).Ionic override all BACK button behaviour for specific controller 2).https://github.com/driftyco/ionic/issues/399
3).https://forum.ionicframework.com/t/how-to-handle-a-click-on-the-generated-back-button/582

请向我解释一下如何覆盖 $ionicGoBack()。就我而言,如何查找天气是软导航栏按钮或硬 Android 按钮。

当我在页面媒体播放器的后退按钮上提供检查元素时,我得到了这个

<button ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item" tabindex="0">
       <i class="icon ion-ios-arrow-back"></i> 
      <span class="back-text" style="transform: translate3d(0px, 0px, 0px);">
      <span class="default-title">Back</span>
      <span class="previous-title hide">Home</span>
     </span></button>

【问题讨论】:

    标签: angularjs ionic-framework ionic-view


    【解决方案1】:

    我会参考我的回答

    可以覆盖控制器中的两个按钮,而无需更改 HTML 代码。

    总结一下:

    • 软导航栏按钮 - 覆盖$rootScope.$ionicGoBack()
    • Android 硬按钮 - 使用 $ionicPlatform.registerBackButtonAction()

    在您的情况下,您想知道$ionicGoBack() 是软后退按钮还是硬后退按钮。如上所述,“软导航栏按钮”就是通过这种方法处理的。

    Android 硬按钮”由不同的方法处理:registerBackButtonAction()


    如果我理解正确,您希望覆盖媒体播放器页面上的所有返回行为,并将用户发送到播放列表页面,即您只想返回 1 级(这将是正常的 Android 行为)。

    这需要覆盖这两个按钮,这是我在链接中详细解释的内容。

    我创建了一个名为doCustomBack() 的新方法,它被两个被覆盖的处理程序调用。这是您要用于导航到播放列表页面的方法:

    // run this function when either hard or soft back button is pressed
    var doCustomBack = function() {
        console.log("custom BACK");
    };
    

    下面的代码将为您覆盖默认的软按钮,指向新的doCustomBack() 方法:

    // override soft back
    // framework calls $rootScope.$ionicGoBack when soft back button is pressed
    var oldSoftBack = $rootScope.$ionicGoBack;
    $rootScope.$ionicGoBack = function() {
        doCustomBack();
    };
    var deregisterSoftBack = function() {
        $rootScope.$ionicGoBack = oldSoftBack;
    };
    

    最后一块是覆盖硬按钮,也指向相同的方法:

    // override hard back
    // registerBackButtonAction() returns a function which can be used to deregister it
    var deregisterHardBack = $ionicPlatform.registerBackButtonAction(
        doCustomBack, 101
    );
    

    上面的代码块还创建了注销你的覆盖的方法,这意味着当你离开控制器时很容易删除你的更改:

    // cancel custom back behaviour
    $scope.$on('$destroy', function() {
        deregisterHardBack();
        deregisterSoftBack();
    });
    

    See my original answer for a different explanation,以及更多相关资源的链接。

    【讨论】:

    • 复制并粘贴您的答案后,我可以看到我的 console.log("custom BACK"); 谢谢。但我两次获得相同的控制台我可以知道为什么
    • @Mohan,对不起,我不知道为什么会这样。我已经有几个月没有从事这个项目了,可能是 Ionic 对他们的框架进行了更新。我在他们的源代码中花了很多时间才到达我所在的位置;这是一项非常艰苦的工作,但也许您可以在其中找到信息。祝你好运
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-10-25
    • 1970-01-01
    • 2017-04-01
    • 1970-01-01
    • 1970-01-01
    • 2012-10-02
    • 2018-05-03
    相关资源
    最近更新 更多