중첩 상태의 컨트롤러가 실행되지 않습니다.

Question

중첩 된 상태가 있고 상위 및 하위 상태가 별도의 컨트롤러를 가지고 있습니다. 그러나 부모 상태 만 실행됩니다.

가 나는 URL 구조를 가지고 : #/레스토랑/2/그래서

, 나는 그것이 '우리의 식품'의 콘텐츠 다음 ID 2와 함께 아이 컨트롤러의 부하를 레스토랑을로드 할 우리의 음식과 다른 기능들을 돌 봅니다.

내 코드는 다음과 같습니다

var app = angular.module("app", ['ui.router']); 
app.config(function ($stateProvider, $urlRouterProvider) { 
$urlRouterProvider.otherwise("/"); 

$stateProvider 
      .state('home', { 
       url: '/', 
       controller: function($scope, $stateParams) { 
         $scope.setRestaurant(0); 
       } 
      }) 
      .state('restaurant', { 
       url: '/restaurant/:restaurantId', 
       controller: function($scope, $stateParams, $state) { 
        console.log('first'); 
        if($stateParams.restaurantId > 0) { 
         $scope.setRestaurant($stateParams.restaurantId); 
        } 
        else { 
         $state.go('home'); 
        } 
       } 
      }) 
    .state('restaurant.our-food', { 
     url: '/our-food', 
     templateUrl: 'templates/our-food.html', 
        controller: function() { 
         console.log('second'); 
        } 
    }); 

});

Answer 1

'restaurant.our-food'상태의 컨트롤러는 부모 상태에 템플릿이 없기 때문에 실행되지 않습니다. 즉, 자신의 템플릿과 컨트롤러를 부착하는 지시문이 ui-view이 아닙니다. 부모 지시어가 어떤 상태를 설정하는 것 외에는 아무 것도하지 않는다고하더라도 적어도 최소한의 템플릿을 제공해야합니다.

에 한번 당신의 '레스토랑'상태로 다음과 그게 당신을 위해 일 수 있는지 추가 :이 UI를-라우터 문서에 설명되어 있습니다

template: "<div ui-view />" 

:

기억 : 추상적 인 주에서는 자녀가 연결되기 위해 여전히 자신의 상태가 필요합니다. 따라서 에 추상 상태를 사용하거나 url을 앞에두고 resolves/data를 설정하거나 onEnter/Exit 함수를 실행하는 경우 템플릿을 추가로 설정해야합니다. < ui-view/> '.

작업을했다

https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views