UI路由器模板未注入，但狀態更改

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不是一個真實的..它是前綴..或我稱之為..其他路由之父..所以您不能在.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指令。

在./partial-home-list.html添加<ui-view></ui-view> ，您將看到它按照您的定義工作。

如果要將home.list.second顯示為單獨的頁面，請按如下所示定義第二個狀態

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

記得在按鈕home.second 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',
        });