Ui Router failing to display content for nested child components

Question

Ui Router failing to display content for nested child components

Below is the current code snippet:

let views = { '': 'app/content.html' };

.state('auto', {
    url: '/automated',
    redirectToChild: {
        state: 'auto.index'
    },
    views: view
})
.state('auto.index', {
    url :'',
    templateUrl: '/app/automated/automated.html'
})
.state('auto.visit', {
    url: '/visit',
    views: {
        '': {templateUrl: '/app/automated/visit.html'}
     }
})
.state('auto.visit.create', {
    url: '/create',
    views: {
        '': {templateUrl: '/app/automated/_form.html'}
    }
})

Here is the corresponding HTML:

// index.html
<ui-view></ui-view>


// content.html

 <div class="wrapper">
    <div class="container">
        <ui-view> </ui-view>
    </div>
</div>


// visit.html
<h5>Visit Page</h5>

// form.html
<h5>Visit Form</h5>

Issue at hand: Everything is functioning correctly with this code except when navigating to auto.visit.create state, it displays visit.html instead of '_form.html'.

How can I update the content of visit.html without altering the existing routes?

First Attempt: I changed my auto.visit.create state to auto.visit-create. This corrected the issue but I prefer to keep create nested under auto.visit

Second Attempt: I added a new <ui-view></ui-view> in visit.html, however, when navigating to the create page, it continues to display the content of visit.html.

I have also attempted to follow the example provided here http://angular-ui.github.io/ui-router/sample/#/, unfortunately, with no success.

javascript angularjs

Answer 1

Answer №1

How do you access the nested views? The notation you're looking for should work perfectly. Make sure to include <ui-view></ui-view> in all parent pages.

Check out the plunker I made as an example; make sure to open the preview in a separate page view to see the generated URLs.

UPDATE

I misunderstood your question, and for that, I apologize. Below is the updated code and plunker that accomplishes what you want. I don't think it's possible to achieve this purely through angular routing, so I used jQuery to implement it. Changes were made on the first layer and second layer.

http://plnkr.co/edit/cxQpu6zS7fifnb0sGvGf?p=preview

Angular Code

(function() {
  angular.module("myApp", ["ui.router"]);

  angular.module("myApp")
    .config(["$stateProvider", "$urlRouterProvider", function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/");
  $stateProvider
    .state("home", {
      url: "/",
      templateUrl: "blank.html"
    })
    .state("first", {
      url: "/first",
      templateUrl: "firstLayerPage.html"
    })
    .state("first.second", {
      url: "/second",
      templateUrl: "secondLayerPage.html"
    })
    .state("first.second.third1", {
      url: "/third_Page1",
      templateUrl: "thirdLayerPage1.html"
    })
    .state("first.second.third2", {
      url: "/third_Page2",
      templateUrl: "thirdLayerPage2.html"
    })
}]); // end of config
})(); //end of enclosure

Index

<body ng-app="myApp">
  <ul>
    <li><a ui-sref="home">home</a></li>
    <li><a ui-sref="first">First Layer</a></li>
  </ul>
  <h1>Home Page</h1>
  <hr>
  <ui-view></ui-view>
</body>

first layer

<p>This is the first layer of pages.</p>
  <ul>
      <li><a id="showSecondLayer" ui-sref="first.second">Second Layer</a></li>
  </ul>
   <hr>
   <ui-view></ui-view>

   <script type="text/javascript">
     $(document).ready(function(){
       $("#showSecondLayer").click(function(){
         $("#secondLayer").show();
       });
     });
   </script>

second layer

<div id="secondLayer">
  <p>This is the second layer</p>
  <ul>
    <li><a id="thirdP1" ui-sref="first.second.third1">Third Layer Page 1</a></li>
    <li><a id="thirdP2" ui-sref="first.second.third2">Third Layer Page 2</a></li>
  </ul>
  <hr>
</div>
<ui-view></ui-view>

<script type="text/javascript">
  $(document).ready(function(){
    $("#thirdP1").click(function(){
      $("#secondLayer").hide();
    });
    $("#thirdP2").click(function(){
      $("#secondLayer").hide();
    });
  });      
</script>

third layer p1

<p>This is page one of the third level of children</p>
<hr>

third layer p2

<p>This is page two of the third level of children</p>
<hr>

Answer 2

How do you access the nested views? The notation you're looking for should work perfectly. Make sure to include <ui-view></ui-view> in all parent pages.

Check out the plunker I made as an example; make sure to open the preview in a separate page view to see the generated URLs.

UPDATE

I misunderstood your question, and for that, I apologize. Below is the updated code and plunker that accomplishes what you want. I don't think it's possible to achieve this purely through angular routing, so I used jQuery to implement it. Changes were made on the first layer and second layer.

http://plnkr.co/edit/cxQpu6zS7fifnb0sGvGf?p=preview

Angular Code

(function() {
  angular.module("myApp", ["ui.router"]);

  angular.module("myApp")
    .config(["$stateProvider", "$urlRouterProvider", function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/");
  $stateProvider
    .state("home", {
      url: "/",
      templateUrl: "blank.html"
    })
    .state("first", {
      url: "/first",
      templateUrl: "firstLayerPage.html"
    })
    .state("first.second", {
      url: "/second",
      templateUrl: "secondLayerPage.html"
    })
    .state("first.second.third1", {
      url: "/third_Page1",
      templateUrl: "thirdLayerPage1.html"
    })
    .state("first.second.third2", {
      url: "/third_Page2",
      templateUrl: "thirdLayerPage2.html"
    })
}]); // end of config
})(); //end of enclosure

Index

<body ng-app="myApp">
  <ul>
    <li><a ui-sref="home">home</a></li>
    <li><a ui-sref="first">First Layer</a></li>
  </ul>
  <h1>Home Page</h1>
  <hr>
  <ui-view></ui-view>
</body>

first layer

<p>This is the first layer of pages.</p>
  <ul>
      <li><a id="showSecondLayer" ui-sref="first.second">Second Layer</a></li>
  </ul>
   <hr>
   <ui-view></ui-view>

   <script type="text/javascript">
     $(document).ready(function(){
       $("#showSecondLayer").click(function(){
         $("#secondLayer").show();
       });
     });
   </script>

second layer

<div id="secondLayer">
  <p>This is the second layer</p>
  <ul>
    <li><a id="thirdP1" ui-sref="first.second.third1">Third Layer Page 1</a></li>
    <li><a id="thirdP2" ui-sref="first.second.third2">Third Layer Page 2</a></li>
  </ul>
  <hr>
</div>
<ui-view></ui-view>

<script type="text/javascript">
  $(document).ready(function(){
    $("#thirdP1").click(function(){
      $("#secondLayer").hide();
    });
    $("#thirdP2").click(function(){
      $("#secondLayer").hide();
    });
  });      
</script>

third layer p1

<p>This is page one of the third level of children</p>
<hr>

third layer p2

<p>This is page two of the third level of children</p>
<hr>

Ui Router failing to display content for nested child components

Answer №1

UPDATE

Similar questions

Numerous intersecting lines on display within Google Maps

Creating dynamic Ionic slides by fetching data from a database

issues with updating a MongoDB collection

Managing a conditional operator in JavaScript and React - what you need to know!

Is there a way to bring my popup closer to my button?

manipulating an iframe on a separate domain

Node.js meets Blockly for a dynamic programming experience

Completing Forms Automatically with AngularJS

Why does the response.json() method in the Fetch API return a JavaScript object instead of a JSON string?

Adding or removing rows within an array in a hybrid Vue project - a step-by-step guide

The way in which notifications for updates are displayed on the Stack Overflow website

You can use the following code to retrieve the value of the checked radio button with the name "nameOfradio", but make sure that the radio button

Display a loading spinner with ReactJS while waiting for an image to load

Unlock the App Store instead of iTunes Store using react-native-version-check

Using Node JS to query data from MySQL and filter a column based on an array of objects

What is the best way to store an ES6 Map in local storage or another location for later use?

Can you help me pinpoint the tags related to mail?

Mutual TLS authentication and secure tunneling with ngrok

What is the best way to add to a variable in jQuery?

No results returned by Mongoose/MongoDB GeoJSON query