如何覆盖默认的后退按钮在离子 [英] how to override the default back button in ionic

查看:664
本文介绍了如何覆盖默认的后退按钮在离子的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有三个看法播放列表,播放列表,以及媒体播放器。

在我的项目,我在默认情况下取回按钮。我调试的Play商店应用中我的方向观看页面的播放列表 - >播放 - >媒体player.Also我对所有的意见有独立的控制器,但我得到一个默认回只播放列表和媒体播放器页面按钮

1)。在点击播放页面后退按钮进入播放列表页面,这样是没有问题的。

2)。在单击后退按钮在媒体播放页转到页播放列表,但我需要去到播放列表。

在这里我有一些链接,我都经历了,但我无法理解关于

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

1)。<一href=\"http://stackoverflow.com/questions/32231737/ionic-override-all-back-button-behaviour-for-specific-controller\">Ionic覆盖特定的控制器所有BACK按钮行为
2)。 https://github.com/driftyco/ionic/issues/399 < BR>
3)。https://forum.ionicframework.com/t/how-to-handle-a-click-on-the-generated-back-button/582

请一定给我解释一下有关替代$ ionicGoBack()。在我的情况如何找到天气它是软的导航栏按钮或硬的Andr​​oid按键。

当我给检查上后退按钮元素上的页面媒体播放器我得到这个

 &LT;按钮NG点击=$ ionicGoBack()级=按钮返回按钮按钮按钮清晰的头项的tabindex =0&GT;
       &LT; I类=图标离子IOS箭头回&GT;&LT; / I&GT;
      &LT;跨度类=后面的文本的风格=改造:translate3d(0像素,0像素,0像素);&GT;
      &LT;跨度类=默认标题&GT;返回&LT; / SPAN&GT;
      &LT;跨度类=previous标题隐藏&GT;家庭和LT; / SPAN&GT;
     &LT; / SPAN&GT;&LT; /按钮&GT;


解决方案

我会在

请参考我的答案

  

这是可以覆盖你的控制器两个按钮,没有任何变化的HTML code。


  
  

要总结一下:


  
  

      
  • 软导航栏按钮的 - 覆盖 $ rootScope $ ionicGoBack()

  •   
  • 硬的Andr​​oid按钮的 - 使用 $ ionicPlatform.registerBackButtonAction()

  •   


在你的情况,你要知道,如果 $ ionicGoBack()是软或硬后退按钮。如上所述,在软导航栏按钮的是用这种方法处理的。

硬的Andr​​oid按钮的用不同的方法来处理: registerBackButtonAction()


如果我理解正确的话,你要重写媒体播放器页面上的所有回行为,也就是你想要去的只有1级回(这是正常的Andr​​oid行为)用户发送到播放列表页面。

这将要求覆盖两个按钮,这是我解释一下的链接。

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

  //运行此功能时,无论是硬或软后退按钮是pressed
VAR doCustomBack =功能(){
    的console.log(定制BACK);
};

在code以下,这将替代默认的软按钮,你指着新的 doCustomBack()方法:

  //覆盖回软
//框架调用$ rootScope。$ ionicGoBack当软后退按钮是pressed
VAR oldSoftBack = $ rootScope $ ionicGoBack。
$ rootScope。$ ionicGoBack =功能(){
    doCustomBack();
};
VAR deregisterSoftBack =功能(){
    $ rootScope $ ionicGoBack = oldSoftBack。
};

最后一块是覆盖硬键,也指向同一个方法:

  //覆盖难回
// registerBackButtonAction()返回可用于注销它的函数
VAR deregisterHardBack = $ ionicPlatform.registerBackButtonAction(
    doCustomBack,101
);

以上code块也创造注销您的覆盖,这意味着它很简单,当你离开控制器删除您的更改方法:

  //自取消回行为
$范围。在$('$破坏',函数(){
    deregisterHardBack();
    deregisterSoftBack();
});


看我为一个不同的解释原来的答案,以及更多的相关资源的链接。

I have three views playlists, playlist, and mediaplayer.

In my project I am getting back button by default. I am debugging an play store app my direction viewing the page is playlists-->playlist-->media player.Also i have separate controller for all there views but i am getting a default back button in playlist and mediaplayer page only.

1).On clicking the back button in playlist page goes to playlists page so there is no problem.

2).On clicking the back button in mediaplayer page goes to playlists page but i need to go to playlist.

here i have some links that i have gone through but i am not able to understand about

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

Please some explain me about overriding the $ionicGoBack(). In my case how to find weather it is Soft navigation bar button or Hard Android button.

When i give inspect element on back button on the page mediaplayer i got this

<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>

解决方案

I will make reference to my answer at

It is possible to override both buttons in your controller, without any changes the the HTML code.

To summarise:

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


In your case, you want to know if $ionicGoBack() is the soft or hard back button. As explained above, the "Soft navigation bar button" is handled by this method.

The "Hard Android button" is handled by a different method: registerBackButtonAction().


If I understand correctly, you want to override all back behaviour on the Media Player page, and send the user to the Playlist page i.e. you want to go only 1 level back (which would be normal Android behaviour).

This would require overriding both buttons, which is what I explain more about on the link.

I create a new method called doCustomBack(), which is called by both of the overridden handlers. This is the method you want to use to navigate to the Playlist page:

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

The code following that will override the default soft button for you, pointing to the new doCustomBack() method:

// 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;
};

The final piece is to override the hard button, also pointing to the same method:

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

The above code blocks also create methods for deregistering your overrides, which means it is simple to remove your changes when you leave the controller:

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


See my original answer for a different explanation, and for more links to related resources.

这篇关于如何覆盖默认的后退按钮在离子的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆