ui-router:$ state.go进入子状态时，父视图消失了 [英] ui-router: parent view disappeared when $state.go to child state

问题描述

我试图通过递归地为每个导航节点创建状态(导航数据是从服务器的DB中读取)来为左侧导航面板动态创建导航树.

模板:

<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'
};

动态生成新状态的代码(从此处学习):

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

直接的问题是(其他问题，如重新创建状态，需要在近期解决):

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

我看到了另一个线程，并在注释中如果您使用$ state.go或$ state.transitionTo更改状态，则将无法使用.对于ui-sref可以正常工作."我担心$state.go不能通过保留父视图进入子状态.

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

解决方案

这肯定是一个非典型用例...通常，如果URL中的内容是动态的，我会将其视为查询/状态参数，但是如果您确实希望动态生成URL，它似乎已被烘焙到UI-Router的较新版本中，或在ui-router Extras中可用，如此处所述:

Angular-UI路由器-以编程方式添加状态

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

I'm trying to dynamically create a navigation tree for my left-side nav-panel by recursively creating states for each nav-node (the navigation data is reading from the server's DB).

The template:

<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>

Ignoring the fetching data and initiating navPanel code, bellow is the navTree state definition code:

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'
};

The code that dynamically generating new states (learning from here):

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

The immediate problem is (other problems like re-creating states need to be solved lately):

Although I can see the top level nav-list in the nav-panel; but when I go into the sub menu by clicking an nav-node, instead of adding a sub-view under the parent view, the whole nav-panel's content changes to the sub-state's view, and all parent level views are gone.

I saw another thread and in the comments "this does not work if you change the states with $state.go or $state.transitionTo. Works fine with ui-sref." I worry that $state.go cannot go to the child-state with the parent-view remains.

I'm thinking to change it to ui-sref version, but the dynamic routing will be a new problem which I still have no idea.

解决方案

This is an atypical use case for sure... typically if the thing in the URL is dynamic I would be treating it as a query/state parameter but if you really want to have the URLs be dynamically generated it appears this is now baked into the newer versions of UI-Router or available in the ui-router extras as explained here:

Angular - UI Router - programmatically add states

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

这篇关于ui-router:$ state.go进入子状态时，父视图消失了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！