UIルータのテンプレートが注入されずに状態が変化します。変更

Question

入れ子になったビューを作成しようとしています。ここには、プランカーhttps://embed.plnkr.co/oRMnMW4QoWwhSkm9maHf/があります。状態は変わりますが、テンプレートは変更されません。

誰も私が

後藤リンク> 2つ目のネストされた間違って何をしている私を修正することができます。

[オン]ボタンをクリックすると、状態は正常に変更されますが、コンテンツは挿入されません。 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") 
      }); 
     }]); 

いますが、抽象を置く場合...覚えておいてください：本当の私は、リンクページのコンテンツは、第二のネストされたコンテンツによって抽象を置く

Answer 1

てみてくださいを交換することにしたいです.. URLは本当のものではありません。それは接頭辞です。または私はそれを..他のルーティングの父と呼んでいます。あなたはそれを.otherwise（）で呼び出すことはできません。

あなたのリンク2番目のビューの（そしてルーティング）.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

回答は非常に簡単です - あなたは、ネスト状態の第三レベルを初期化しているが、./partial-home-list.htmlに、あなたはui-viewディレクティブを追加しませんでしたしました。

<ui-view></ui-view>を./partial-home-list.htmlに追加すると、定義どおりに動作することがわかります。

あなたは別のページとしてhome.list.second表示したい場合は、ボタン

にhome.secondにUI-SREFを更新することを忘れないでください、この

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

のような第二の状態を定義する -

ネストされたブレッドクラムを取得するために、私は「良い」解決策を持っていませんが、うまくいくでしょう。

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