UI 路由器无法 $state.go 子状态和显示命名视图

Question

我试着跟随 the document to create a named view for my sub state and $state.go to it from it's parent state, but it is unsuccessful. Here is the plunker 进行编辑。

<!DOCTYPE html>
<html ng-app="demo">

  <head>
    <meta charset="utf-8" />
    <title>Demo</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
    <script>
      let app = angular.module('demo', ['ui.router']);
    
      app.config(['$urlRouterProvider', '$stateProvider', function ($up, $sp) {
        $sp.state('state1', state1);
        $sp.state('state1.state2', state2);
        $up.otherwise('/state1');
      }]);
      
      let state1 = {
        url: '/state1',
        controller: ['$state', function ($st) {
          this.stName = $st.current.name;
          this.createSubState = function(){
            $st.go('state1.state2', {message: 'message from ' + $st.current.name + ' to state2'});
          }
        }],
        controllerAs: '$ctrl',
        template: `<div style="border-style: solid;">
          <p ng-click="$ctrl.createSubState()" style="cursor: pointer; color: blue;">{{$ctrl.stName}} begin</p>
          <ui-view="stat2View"></ui-view>
          <p>{{$ctrl.stName}} end</p>
        </div>`
      };
      
      let state2 = {
        params: {
          message: ''
        },
        views: {
          stat2View: {
            controller: ['$transition$', '$state', function ($tr, $st) {
              this.parentMessage = $tr.params().message;
              this.stName = $st.current.name;
            }],
            controllerAs: '$ctrl',
            template: `<div style="border-style: solid;">
              <p style="cursor: pointer; color: blue;">{{$ctrl.stName}} begin</p>
              {{$ctrl.parentMessage}}
              <p>{{$ctrl.stName}} end</p>
            </div>`
          }
        }
      };

    </script>
  </head>

  <body>
    <ui-view></ui-view>
  </body>

</html>

我尝试这样做是因为我使用动态生成的状态来显示左侧导航面板与从服务器获取的 navTreeModal 的对比，所以我必须为视图命名，否则它们会搞砸。

Answer 1

你快到了：corrected plunker

我做了什么：

ui-view="state2View" 必须是 ui-view name="state2View"
视图名称属性 stat2View 必须是 "stat2View@state1"，因为它指的是父状态 ui-view

编辑

要么使用 ui-view 声明，例如：

<ui-view name="viewsName" />

或

<div ui-view="viewsName"></div>

UI 路由器无法 $state.go 子状态和显示命名视图

UI Router cannot $state.go to sub state and show named view

angularjs

angular-ui-router