Question

我正在尝试使用ui.router来使某些导航标签保持状态。当我意识到指定一个默认参数值在刷新页面时给出一些意外/错误/奇怪的行为时，我非常接近我想要它的所有内容。

我有两个参数，stateNum（1或2）和subState（A，B或C）。该网址的格式为/stateTabs/state/:stateNum/sub/:subState。有问题的州定义是

$stateProvider.state("stateTabs", {
     url:        "/stateTabs"
    ,controller: "StateTabsCtrl"

//  ,params: { // default params
//       stateNum: "2"
//      ,subState: "B"
//  }

    ,templateUrl: "tplStateTabs"
});
$stateProvider.state("stateTabs.state", {
    url: "/state/:stateNum"
});
$stateProvider.state("stateTabs.state.sub", {
    url: "/sub/:subState"
});

如果启用了params属性，则刷新页面会使stateNum等于网址中的<stateNum>/sub/<subState>，subState等于默认值{{1 }}。它似乎在做贪婪的匹配。单击任何选项卡将返回正常功能。

我希望刷新后，ui.router会看到一个URL，例如“stateTabs / state / 2 / sub / B”，并将其解析为正确的$ stateParams。这是一个错误还是我做错了什么？

我最终要完成的是能够"x"只有ui-sref并且默认为预定义的stateNum + subState。

下面是完整的代码段，但需要将其复制到本地文件才能刷新并触发错误。

stateTabs

var StateTabs = (function ()
{
  "use strict";

  var module = angular.module("StateTabs", ["ng", "ui.router"]);

  module.config(["$stateProvider", "$urlRouterProvider",
    function ($stateProvider, $urlRouterProvider)
    {
      $urlRouterProvider.otherwise("/");

      // controller not instantiated if template is not defined
      $stateProvider.state("index", {
         url: "/"
      });
      $stateProvider.state("stateTabs", {
         url:        "/stateTabs"
        ,controller: "StateTabsCtrl"

/*
 * If the following property is enabled,
 * refreshing the page will cause stateNum
 * to equal the "/<stateNum>/sub/<subState>"
 *  from the URL and subState to equal the
 * default of "x". Click any tab will return
 * to normal functionality.
 */
//        ,params: { // default params
//           stateNum: "3"
//          ,subState: "x"
//        }

        ,templateUrl: "tplStateTabs"
      });

      $stateProvider.state("stateTabs.state", {
        url: "/state/:stateNum"
      });
      $stateProvider.state("stateTabs.state.sub", {
        url: "/sub/:subState"
      });
    }
  ]);

  module.controller("StateTabsCtrl", ["$scope",
    function ($scope)
    {
      $scope.$on("$stateChangeSuccess", function (event, toState, toParams, fromState, fromParams) {
        $scope.stateParams = toParams;
      });
    }
  ]);

  return module;
})();

div#stateTabs ul.tabbed-nav,
div#stateTabs ul.tabbed-sub-nav {
    display:     flex;
    flex-wrap:   nowrap;
    align-items: stretch;
    padding:     0;
    margin:      0;
    font-size:   16px;
    text-align:  center;
    line-height: 1.1;
}

div#stateTabs ul.tabbed-nav li,
div#stateTabs ul.tabbed-sub-nav li {
    padding:         1rem 2rem;
    margin-right:    1px;
    display:         flex;
    flex-flow:       column;
    justify-content: center;
}

div#stateTabs ul.tabbed-nav li:last-child,
div#stateTabs ul.tabbed-sub-nav li:last-child {
    margin-right: 0;
}

div#stateTabs ul.tabbed-nav li a,
div#stateTabs ul.tabbed-sub-nav li a {
    color:           inherit;
    text-decoration: none;
}

div#stateTabs ul.tabbed-nav {
    color:   white;
    padding: 0;
    margin:  0;
}

div#stateTabs ul.tabbed-nav li {
    background-color: black;
}

div#stateTabs ul.tabbed-sub-nav {
    justify-content: flex-start;
    color:           inherit;
    position:        relative;
}

div#stateTabs ul.tabbed-sub-nav li {
    background-color: silver;
    z-index:          10;
}

div#stateTabs ul.tabbed-nav li.selected {
    color:            black;
    background-color: #4dff4d !important;
}

div#stateTabs ul.tabbed-sub-nav li.selected {
    background-color: #269abc !important;
}

Answer 1

这里的解决方案并不复杂 - 只需将params属于属于定义它们的状态。有一个workgin plunker

  $stateProvider.state("stateTabs", {
     url:        "/stateTabs"
    ,controller: "StateTabsCtrl"
    ,templateUrl: "tplStateTabs.html"

   // PARAMS do not belong here, because there is nothing related in URL

  });

  $stateProvider.state("stateTabs.state", {
    url: "/state/:stateNum",
    params: { // default params
       stateNum: "3"               // here belongs stateNum
    }
  });
  $stateProvider.state("stateTabs.state.sub", {
    url: "/sub/:subState",
    params: { // default params
      subState: "x"                // here can be subState
    }
  });

检查行动here

ui.router默认参数值导致页面刷新错误

1 个答案: