UI 라우터 템플릿을 주입하지만, 상태 변화는 내가 중첩 된 뷰를 만들려고 노력하고

Question

여기, 변경 할 plunker https://embed.plnkr.co/oRMnMW4QoWwhSkm9maHf/하지 않습니다. 상태는 변경되지만 템플리트는 변경되지 않습니다. 내가

고토 링크> 두 번째 중첩

잘못 한 일을

은 누구도 날을 수정할 수 있습니다.

On 버튼을 클릭하면 상태가 변경되지만 내용은 삽입되지 않습니다. 당신이 추상적 넣으면 ..

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()

에 그리고 당신의 링크를 다른 라우팅의 아버지를 호출 할 수 없습니다 ..so 두 번째 뷰 (라우팅) .. 너무 같이 ... .list 제거 :

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

,617

와 링크:

// 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>을 추가하고 당신은 당신이 정의 된대로 작동하는지 확인할 수 있습니다.

별도의 페이지는 다음이

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

같은 제 2 상태를 정의로 home.list.second 표시 버튼

에 home.second에 UI가-SREF 업데이트하는 것을 기억하십시오 -

중첩 된 이동 경로를 얻으려면 "좋은"해결책이 없지만 올바르게 작동합니다.

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