I've been attempting to create nested views, you can check out the Plunker demo https://embed.plnkr.co/oRMnMW4QoWwhSkm9maHf/. The state is updating as expected but the template remains the same.
Could someone please point out where I may have gone wrong?
Go to Link > Second Nested .
After clicking the button, the state updates successfully but the content doesn't change. My goal is for the content of the linked page to be replaced with the content of the second nested view.
To properly set up abstraction, make sure to include abstract:true in the 'father' root element like this:
var routerApp = angular.module('routerApp', ['ui.router','ncy-angular-breadcrumb']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home/list');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
abstract: true,
templateUrl: './partial-home.html'
})
// nested list with custom controller
.state('home.list', {
url: '/list',
templateUrl: './partial-home-list.html',
controller: function($scope) {
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
.state('home.second', {
url: '/second',
templateUrl: './second.html',
});
});
routerApp.run(['$rootScope', '$state', function ($rootScope, $state) {
$rootScope.$on('$stateChangeStart', function (event, toState) {
console.log("state Change")
});
}]);
Keep in mind that when using abstract: true, the URL acts as a prefix and cannot be called directly in the .otherwise() function.
Including the second view in your routing, simply remove the .list like so:
.state('home.second', { //<-- REMOVE THE .list HERE
url: '/second',
templateUrl: './second.html',
});
In the link, update it accordingly:
// UPDATE IT LIKE THIS..
<a ui-sref="home.second" class="btn btn-danger">Second Nested</a>
It's quite simple - you are setting up the third level of nested states, but in your ./partial-home-list.html file, you forgot to include the ui-view directive.
To fix this, add <ui-view></ui-view> within your ./partial-home-list.html file and you will see that it functions as intended.
If you want to display the 'home.list.second' as a separate page, define the second state like this:
.state('home.second', {
url: '/home/list/second',
templateUrl: 'second.html',
});Don't forget to update the ui-sref to home.second on the button.
--
To achieve the nested breadcrumb effect, there may not be an elegant solution available, but one workaround is doing the following:
-- Partial home list html
<div ng-if="state.current.name != 'home.list.second'">
<ul>
<li ng-repeat="dog in dogs">{{ dog }}</li>
</ul>
<div ncy-breadcrumb></div>
<a ui-sref="home.list.second" class="btn btn-danger">Second Nested</a>
</div>
<ui-view></ui-view>
App js
// nested list with custom controller
.state('home.list', {
url: '/list',
templateUrl: 'partial-home-list.html',
controller: function($scope, $state) {
$scope.state = $state;
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
.state('home.list.second', {
url: '/second',
templateUrl: 'second.html',
});
I'm having trouble with npm run build not calling webpack as expected. I've modified the script in my package.json file, but it didn't work. I'm using Linux. Here is a snippet from my package.json file: { "name": "learn-webpack", ...
Looking to alter the behavior of the alert function in TypeScript? You can achieve this by creating a new function that wraps around the original alert and modifies its behavior. alert = (function (origAlert) { return function (...messages: any[]) { ...
While searching for solutions, I came across several articles with similar topics, but unfortunately, none of the proposed solutions worked. Please forgive me if it was due to my own error. Background I am assisting a client who is transition ...
Dealing with JS bugs can be quite frustrating for me. The code snippet below is giving me trouble, as it creates a string containing session data and date information to push into an array: var _writes = String(req.session.subscriber + ":" + req.session.po ...
I've been experimenting with setting a div's position to fixed once a user has scrolled a certain distance. I've run into an issue where the fixed position div's width doesn't match its parent element. How can I ensure that the fix ...
I'm in the process of replacing an iframe with an image, and I want to accomplish this with minimal code. The container div I'm working with has a data-toggle attribute: <div id="my-div" data-toggle="video2"> <div id="videocontaine ...
I am currently developing a nodejs application that needs to communicate with various network resources, such as cache services and databases. To achieve this functionality, I have created a module imported through the require statement, which allows the a ...
Encountered an issue while using recompose to create a Higher Order Component (HoC) with withState and lifecycle: warning.js?8a56:36 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM eleme ...
Encountering the following error: Fatal error: Uncaught Error: Using $this when not in object context in E:\xampp\htdocs\StudentGuideBook\Version1.0\models\AjaxChecking.php:4 Stack trace: #0 {main} thrown in E:\xampp&b ...
Whenever I make modifications to my Angular template (html file), I find myself having to clear my browser cache and refresh the browser in order for the changes to take effect. Is there a workaround for this inconvenience? I primarily use Chrome and Fire ...
I'm encountering an error when trying to run this query, and I'm not sure why it's returning a bad request. My goal is to fetch a specific user from the database using the accountId. Can someone assist me with this issue? Below is the funct ...
Snippet <Collapse in={expanded} onTransitionEnd={() => console.log('finished')} > <div>foo</div> </Collapse> Error Detection The callback function (onTransitionEnd) is not triggered af ...
When running npm scripts, I encountered an issue where the first command successfully starts a node server but prevents the execution of the second command. How can I ensure that both commands are executed successfully? package.json "scripts": { "dev ...
I am a newcomer to Meteor JS and I am looking for a way to render a specific template to a specific part of my web app when a menu is clicked. I am currently using iron-router and layout template. The current layout is functioning correctly. For example, w ...
As I work on hosting multiple dynamic pages, each with its own function to call at a specific time, I encounter an issue where the current ref is always null. This poses a challenge when trying to access the reference for each page. export default class Qu ...
When trying to access the Vuejs $slots instance, I encounter el = null, but type = "div" Here is the template: <slot name="head"> <h1> {{ text }} </h1> </slot> And in the script section: ... ...
I am looking to revamp a business application by utilizing asp.net web api as the service layer and implementing JavaScript to interact with the web api for retrieving and displaying data. While I have a good grasp on how all the scenarios will function s ...
I'm relatively new to angular and front-end development. I'm currently trying to make a call to a REST API in order to fetch a list of products, and then display them on the HTML page. product.component.html <div class="page-title"& ...
I have set up a single controller and utilized it in two views with minor variations. Here is the Angular code snippet: app.controller('MyCtrl', function($scope) { $scope.canSave = false; $scope.demo = { files : [{ filename ...
I have been working on implementing localization in my angular application using angular-translate. However, I have encountered a challenge when it comes to parameterized translation in a plural context. My index.html file includes the following script re ...