Question

我正在尝试制作嵌套视图，这里是plunker https://embed.plnkr.co/oRMnMW4QoWwhSkm9maHf/。状态发生变化但模板没有变化。

任何人都可以纠正我做错了什么

转到链接＆gt;第二次嵌套。

单击此按钮，状态更改成功，但未注入内容。我希望链接页面内容被第二嵌套内容替换

Answer 1

尝试将抽象：true放在父亲的身上。 root喜欢：

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

未注入UI路由器模板，但状态更改发生更改

2 个答案: