UI的路由器的路由在同一视图（查看和编辑） [英] UI-Router routing in the same view (View and Edit)

问题描述

我无法将状态从视图页面更改UI的路由器编辑页面，反之亦然。
事情我已经试过：

I'm not able to change the state from view page to edit page and vice versa in UI-Router. Things I've tried:

控制器：

$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.认为，编辑页面

In default.html I'm loading only the view which I need to see when I first open the page.ie.,the edit page

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

这显示了编辑页面。在保存编辑页面，我需要用我给的状态 showViewA @ ViewshowViewA 视图页面来代替编辑页面。但它不是重定向。我知道我在哪里出了错？

which shows the edit page. On saving the edit page I need to replace the edit page with the view page which I have given a state showViewA@ViewshowViewA. But it's not redirecting. Can I know where I went wrong?

推荐答案

有一个工作plunker

让我们pretend这是的 default.html中 的内容：

Let's pretend that this is the default.html content:

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

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

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

然后使我们的国家提供这些链​​接的工作：

Then to make our states working with these links:

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

这将是调整状态定义的（改变是新线 - 老留下了注释值）。的

This would be the adjusted states definition (changes are new lines - old are left with commented values).

与内部景观，注入父状态界面视图=viewB占位符/锚

Parent state with inner view, injected into ui-view="viewB" placeholder/anchor

    .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"
        }
      }
    })

注入其观点到同一个用户界面视图儿童=viewB

Children injecting its view into the same ui-view="viewB"

  //.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"
      }
    } 
  })

检查一下这里

这篇关于UI的路由器的路由在同一视图（查看和编辑）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！