javascript - 在带有 View (路由)的 AngularJS 中，为什么 Controller 只向前执行？

Question

我有一个带 View 的 Ionic 项目(使用 AngularJS)。路由就像:

.state('menu.play', {
  url: '/play/:audioIndex',
  views: {
    'side-part': {
      templateUrl: 'templates/play.html',
      controller: 'playCtrl'
    }
  }
})

在 Controller 上，我获取“audioIndex”参数并将其设置为 $rootScope、$scope 并将其显示在控制台上

.controller('playCtrl', function($scope, $stateParams, $rootScope) {
    $rootScope.viewsAudioIndex = $stateParams.audioIndex;
    $scope.audioIndex = $stateParams.audioIndex;

    console.log("stateParams.audioIndex: " + $stateParams.audioIndex);
})

我从http://localhost:8100/#/menu/play/0开始。 我的下一个音频按钮如下:

<a href="#/menu/play/{{audioIndex + 1}}">Next</a>

我点击它三次，然后在控制台上

stateParams.audioIndex: 0
stateParams.audioIndex: 1
stateParams.audioIndex: 2
stateParams.audioIndex: 3

没关系，问题是当我点击后退按钮时；

<a href="#/menu/play/{{audioIndex- 1}}">Back</a>

控制台不打印任何内容，就像 Controller 没有被调用。

我检查了 chrome 开发工具(AngularJS 选项卡)，当我返回时 $rootScope 没有改变。 View 路由工作正常，没有问题。

回顾一下，如果我从 menu/play/0 开始并且我这样做了

1. 点击下一步
2. 点击下一步
3. 点击下一步
4. 点击返回
5. 点击返回
6. 点击返回
7. 点击下一步
8. 点击下一步
9. 点击下一步

我进入控制台

stateParams.audioIndex: 0
stateParams.audioIndex: 1
stateParams.audioIndex: 2
stateParams.audioIndex: 3
stateParams.audioIndex: 1
stateParams.audioIndex: 2
stateParams.audioIndex: 3

知道为什么吗？我看到当我返回时，作用域被销毁，但这并不能解释 $rootScope 没有被更新。

Answer 1

一般来说， Angular 路由必须使用 ui-sref 来完成。尚未测试您的案例，但您仍然需要更改链接以避免其他错误:

<a ui-sref="menu.play({audioIndex: {{audioIndex + 1}}})">Next</a>
<a ui-sref="menu.play({audioIndex: {{audioIndex - 1}}})">Back</a>