Question

我试图跟随the document为我的子状态创建一个命名视图，并从它的父状态创建$ state.go，但它不成功。 Here is the plunker用于编辑。

＆＃13;

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

＆＃13;

我试图这样做是因为我使用动态生成的状态来显示从服务器获取的navTreeModal的左侧导航面板，所以我必须给视图命名或者它们弄乱起来。

Answer 1

你几乎在那里：corrected plunker

我做了什么：

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

修改

使用ui-view声明，如：

"stat2View@state1"

或

<ui-view name="viewsName" />

UI路由器不能$ state.go到子状态并显示命名视图

1 个答案: