Question

我试图通过递归地为每个导航节点创建状态（导航数据正在从服务器的数据库读取）来为我的左侧导航面板动态创建导航树。

模板：

<script type="text/ng-template" id="navTree">
  <ul class="nav flex-sm-column">
    <li ng-repeat="node in $ctrl.nodeList">
      <div ng-click="$ctrl.newState(node)">
        <span class="{{node.class}}"></span>&nbsp;{{node.title}}
      </div>
      <div ng-if="node.children.length > 0" ui-view>
      </div>
    </li>
  </ul>
</script>

忽略提取数据并启动navPanel代码，下面是navTree状态定义代码：

let st_navTree = {
  name: 'navTree',
  params: {
    nodeList: []
  },
  controller: ['$transition$', 'runtimeStates', '$state', function ($transition$, runtimeStates, $state) {
    ctrl = this;
    ctrl.nodeList = $transition$.params().nodeList;
    ctrl.newState = function (node) {
      let subStateName = $state.current.name + '.' + node.name;
      runtimeStates.newState(subStateName, st_navTree);
      $state.go(subStateName, {nodeList: node.children});
    };
  }],
  controllerAs: '$ctrl',
  templateUrl: 'navTree'
};

动态生成新状态的代码（从here学习）：

app.provider('runtimeStates', ['$stateProvider', function ($stateProvider) {
  this.$get = function () {
    return {
      newState: function (name, state) {
        $stateProvider.state(name, state);
      }
    };
  };
}]);

当前的问题是（最近需要解决的重新创建状态等其他问题）：

虽然我可以在导航面板中看到顶级导航列表;但是当我通过单击导航节点进入子菜单时，而不是在父视图下添加子视图，整个导航面板的内容将更改为子状态视图，并且所有父级别的观点都消失了。

我看到了另一个thread并且在评论＆＃34中;如果您使用$ state.go或$ state.transitionTo更改状态，则此功能无效。适用于ui-sref。＆＃34;我担心$state.go无法进入子状态，父视图仍然存在。

我正在考虑将其更改为ui-sref版本，但动态路由将是一个新问题，我仍然不知道。

Answer 1

这是一个非典型的用例肯定...通常如果URL中的东西是动态的，我会将其视为查询/状态参数但是如果你真的想要动态生成这些URL，那么这似乎是现在已经融入了更新版本的UI-Router，或者在ui-router extras中提供，如下所述：

Angular - UI Router - programmatically add states

https://ui-router.github.io/ng1/docs/latest/modules/injectables.html#_stateregistry

ui-router：$ state.go到子状态

1 个答案: