UI Router template is not injected but state changes Changes

Question

I am trying to make a nested views, here is the plunker https://embed.plnkr.co/oRMnMW4QoWwhSkm9maHf/. The state changes but the template not changes.

Can anyone correct me what have I done wrong

Goto Link > Second Nested .

On Clicking the button , state changes successfully but the content is not injected. I want the link page content to be replaced by the second-nested content

Answer 1

Try to put abstract:true on the 'father' root like:

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

but Remember .. if you put abstract: true .. the url is not a real one .. it's a prefix .. or as i call it .. a father of other routing ..so you can not call it in the .otherwise()

And in your link (and routing) of the second view .. just remove the .list ... so like this:

.state('home.second', { //<-- HERE .. REMOVE THE .list
                url: '/second',
                templateUrl: './second.html',
            });

and in the link:

 // AND HERE .. 

<a ui-sref="home.second" class="btn btn-danger">Second Nested</a>

Answer 2

Answer is pretty simple - you are initializing 3rd level of nesting states but in ./partial-home-list.html you've didn't add ui-view directive.

Add <ui-view></ui-view> in ./partial-home-list.html and you will see that it works as you defined.

If you want to display home.list.second as separate page then define second state like this

 .state('home.second', {
            url: '/home/list/second',
            templateUrl: 'second.html',
        });

Remember to update ui-sref to home.second on button

--

Just to get nested breadcrumb I have not "nice" solution but will work.

-- 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',
        });