Question

我无法在UI-Router中将状态从视图页面更改为编辑页面，反之亦然。我尝试过的事情：

控制器：

$stateProvider
        .state('showViewA', {
            views: {
                " ": {
                    template: "default.html",
                    controller:"DefaultController.ts"
                     },
                "viewB@showViewA": {
                    template: "viewPage.html",
                    controller:"DefaultController.ts"
                    }
            } 
        }) 
    .state('showViewA@EditshowViewA', {
            views: {
                " ": {
                    template: "defaultEdit.html",
                    controller:"DefaultEditController.ts"
                     }                 
            } 
        }) 
    .state('showViewA@ViewshowViewA', {
            views: {
                " ": {
                    template: "defaultShow.html",
                    controller:"DefaultShowController.ts"
                     }                 
            } 
        })

在default.html我只加载了我第一次打开page.ie.时需要查看的视图，编辑页面

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

显示编辑页面。在保存编辑页面时，我需要用我已经给出状态showViewA@ViewshowViewA的视图页面替换编辑页面。但它并没有重定向。我能知道我哪里出错吗？

Answer 1

有a working plunker

我们假装这是 default.html 内容：

<div >
  <h2>The default view (layout)</h2>

  <b>place holder for viewB</b>
  <hr />

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

然后让我们的州使用这些链接：

 <a ui-sref="showViewA">
 <a ui-sref="showViewA.EditshowViewA">
 <a ui-sref="showViewA.ViewshowViewA">

这将是调整后的状态定义（更改为新行 - 旧版留有注释值）。

具有内部视图的父状态，注入ui-view="viewB"占位符/锚点

    .state('showViewA', {
      url: '/',
      views: {
        //" ": {
        "": {
          //template: "default.html",
          templateUrl: "default.html",
          //controller:"DefaultController.ts"
          controller: "DefaultController"
        },
        "viewB@showViewA": {
          //template: "viewPage.html",
          templateUrl: "viewPage.html",
          //controller: "DefaultController.ts"
          controller: "DefaultController"
        }
      }
    })

儿童将其观点注入同一个视图=＆＃34; viewB＆＃34;

  //.state('showViewA@EditshowViewA', {
  .state('showViewA.EditshowViewA', {
    views: {
      //" ": {
      "viewB": {
        //template: "defaultEdit.html",
        templateUrl: "defaultEdit.html",
        //controller:"DefaultEditController.ts"
        controller: "DefaultEditController"
      }
    }
  })
  //.state('showViewA@ViewshowViewA', {
  .state('showViewA.ViewshowViewA', {
    views: {
      //" ": {
      "viewB": {
        //template: "defaultShow.html",
        templateUrl: "defaultShow.html",
        //controller:"DefaultShowController.ts"
        controller: "DefaultShowController"
      }
    } 
  })

检查here

在同一视图中的UI路由器路由（查看和编辑）

1 个答案: