Angular ui路由器 - 从一种状态转换到没有参数的相同状态失败

Question

Plunker Demo

  <script>
    var myapp = angular.module('myapp', ["ui.router"])
     myapp.config(function($stateProvider, $urlRouterProvider) {

      // For any unmatched url, send to /route1
      $urlRouterProvider.otherwise("/dashboard")

      $stateProvider
        .state('dashboard', {
          url: '/dashboard',
          templateUrl: 'dashboard.html',
          controller: 'MainCtrl'

        })
        .state('verify', {
          url: '/verify?email&code',
          templateUrl: 'verify.html',
          controller: 'verifyCtrl'
        })
    });
    myapp.controller('MainCtrl', function($scope,$state) {
      $scope.goTo = function () {
        $state.go('verify',{'email':'param@test.com', 'code': {'name': 'test name'}});
      }
    })
    myapp.controller('verifyCtrl', function($scope, $stateParams) {
      $scope.email = $stateParams.email;
      $scope.code = $stateParams.code.name;
    })
  </script>

当从带有参数的状态导航到不带参数的相同状态时，它不起作用。

在演示中，首先单击“使用电子邮件和代码验证”，然后单击其他链接“无参数验证”。它将无法正确导航。

Answer 1

状态属性通常在从一种状态转换到另一种状态时被继承。如果未定义参数，这也会导致参数被复制。使用inherit=false 将停止此操作。 为了在 ui-serf 中使用这个选项，我们有 ui-sref-opts 属性。

Demo-Plunker

在 HTML 中：

<a ui-sref="verify" ui-sref-opts="{inherit: false}">verify without params</a>

在 JS 中：

$state.go('verify',{},{inherit:false});