Navigating with UI-Router within a single view for both viewing and editing purposes

Question

Navigating with UI-Router within a single view for both viewing and editing purposes

I have been encountering an issue with changing states between the view page and edit page using UI-Router. Here are some of the things I have attempted:

Controller:

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

Within default.html, I am only rendering the view that should be visible when initially opening the page, i.e., the edit page.

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

This displays the edit page. After saving changes on the edit page, I want to transition to the view page specified in state showViewA@ViewshowViewA, but the redirect is not happening. Can you help me identify where I went wrong?

javascript angularjs angular-ui-router

Answer 1

Answer №1

Visit this plunker

Imagine that this represents the default.html content:

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

  <b>placeholder for viewB</b>
  <hr />

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

Next, let's update our state configuration to correspond with these links:

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

Here is the modified states definition (new lines represent changes - old lines are commented out).

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

Children injecting their views 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"
      }
    } 
  })

Try it out here

Answer 2

Visit this plunker

Imagine that this represents the default.html content:

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

  <b>placeholder for viewB</b>
  <hr />

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

Next, let's update our state configuration to correspond with these links:

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

Here is the modified states definition (new lines represent changes - old lines are commented out).

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

Children injecting their views 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"
      }
    } 
  })

Try it out here

Navigating with UI-Router within a single view for both viewing and editing purposes

Answer №1

Similar questions

Is it possible to store Socket.IO responses in a cache for quicker retrieval?

Guide on implementing ng-change in a select dropdown for dynamically populating data

I have added the same directive to both of my HTML files

Error: Unable to locate module: 'fs' in Next.js

Execute the cucumber tests based on tags or run all the tests

Secure API Calls with Prismic while Keeping Access Tokens Hidden

How can JQuery be used to implement "scrolling" buttons and automatically update the main page with fresh data?

Adding flair to the encompassing container

Updating Sencha list itemTpl on the fly

How about utilizing node.js as a peer for WebRTC?

Updating the footer of a React application using Material UI Grid

unable to execute grunt post npm installation

Should the article ID be sent to the ajax file, or should the ajax file retrieve the article ID directly? This dilemma arises in a

The TypeScript compiler is indicating that the Observable HttpEvent cannot be assigned to the type Observable

The trick to keeping a div open without it closing until the page is refreshed

Utilize Selenium to extract information from a webpage, including content that is dynamically generated through JavaScript

No content sent in the request body while implementing fetch

Using Javascript within a PHP file to generate JSON output

Unfortunately, CORS is preventing me from sending a POST request through AJAX

Neglect to notify about the input text's value