Шаблон UI Router не внедряется, но изменяется состояние Изменения

Question

Я пытаюсь сделать вложенные представления, вот плункер https://embed.plnkr.co/oRMnMW4QoWwhSkm9maHf/. Состояние изменяется, но шаблон не изменяется.

Может кто-нибудь исправить меня, что я сделал не так

Перейти к ссылке> Второй вложенный.

При нажатии кнопки состояние успешно изменяется, но содержимое не вводится. Я хочу, чтобы содержимое страницы ссылки было заменено вторым вложенным содержимым

Answer 1

Попробуйте поместить abstract: true в корень "отца", например:

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

но помните.. если вы поставите abstract: true.. URL-адрес не является реальным.. это префикс.. или, как я это называю.. отец другого роутинга.. поэтому вы не можете вызвать его в. ()

И в вашей ссылке (и маршрутизации) второго представления.. просто удалите.list... так вот так:

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

и в ссылке:

 // AND HERE .. 

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

Answer 2

Ответ довольно прост - вы инициализируете 3-й уровень состояний вложенности, но в ./partial-home-list.html ты не добавил ui-view директивы.

добавлять <ui-view></ui-view> в ./partial-home-list.html и вы увидите, что это работает, как вы определили.

Если вы хотите отобразить home.list.second как отдельную страницу, определите второе состояние следующим образом

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

Не забудьте обновить ui-sref до home.second на кнопку

-

Просто чтобы получить вложенные хлебные крошки, у меня нет "хорошего" решения, но я буду работать.

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