javascript - UI Router 模板未注入，但状态更改 Changes

Question

我正在尝试制作嵌套视图，这是 plunker 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不是真实的..它是前缀..或者我称之为..其他路由的父亲..所以你不能在.otherwise中调用它()

在您的第二个视图的链接（和路由）中......只需删除 .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.secondon 按钮

--

只是为了获得嵌套的面包屑，我没有“好的”解决方案，但会起作用。

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