阻止 Ionic App 中的导航答案

【问题标题】：Preventing navigation in Ionic App阻止 Ionic App 中的导航
【发布时间】：2016-02-17 12:53:15
【问题描述】：

我试图阻止导航并在控制器中显示一个弹出窗口。

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
  if(someConditionMet) {
    event.preventDefault();
    showPopup();
  }
}

除了标签导航之外，这就像一个魅力。它无法正确阻止导航并导航到选项卡然后显示弹出窗口。另一个问题出现在这里，因为范围更改弹出窗口无法正确加载并引发异常。我只看到一个空白弹出窗口，此后无法退出。

编辑 - Plunker 演示 http://plnkr.co/edit/r8MxO6tDZfTlHPXrVJlM?p=preview

从侧面菜单按关于它通常会阻止。然后按设置选项卡。它正在尝试导航到设置选项卡，然后显示弹出窗口。设置选项卡也无法成功加载。

【问题讨论】：

请提供完整且可验证的示例，重现您的问题。你提供的代码太笼统了。
我添加了一个 plunker 演示。

标签： javascript angularjs cordova ionic-framework

【解决方案1】：

我编辑了“设置”状态（名称“tabs.about”，嵌套到“tabs”）：

.state('tabs.about', {
  url: '/about',
  controller: 'AboutCtrl',
  templateUrl: 'about.html'
});

然后我创建了一个附加到<body> 的新控制器（“mainCtrl”）并将$stateChangeStart 事件处理程序移至此处，因此它可以在不考虑当前状态的情况下监听事件（以前它位于 Home 控制器中):

  $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    var txt = '$stateChangeStart from: '+fromState.name+" to "+toState.name;
    console.log(txt);
    $rootScope.log = txt;
  })

这是一个更新的plunker：

http://plnkr.co/edit/xcTMzPJdTVgVxV5jgpho

【讨论】：