UI-Bootstrap 탭과 UI-Router가있는 Angularjs 탐색 메뉴

Question

this Plunker에서 제대로 작동하려면 메뉴 링크와 탭을 만들 수 없습니다. 내가 볼 수 있듯이 'Route 1'을 두 번 클릭하여 Route2 탭으로 돌아가야합니다. 또한 'Route 2'메뉴 링크를 두 번 클릭하면 탭 콘텐츠가 렌더링되지 않습니다.

나는이 중요한 코드의 관련 부분이라고 생각 :

myapp.config(function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise("/"); 

    $stateProvider 
    .state('route1', { 
     url: "/", 
     templateUrl: "route1.html" 
    }) 
    .state('DocumentoMasterView', { 
     url: "/route2", 
     templateUrl: "route2.html", 
     controller: 'myAppController' 
    }) 
    .state('DocumentoMasterView.A', { 
     url: '/detail', 
     templateUrl: 'route2.A.view.html', 
     controller: 'myAppController' 
    }) 
    .state('DocumentoMasterView.B', { 
     url: '/image', 
     templateUrl: 'route2.B.view.html', 
     controller: 'myAppController' 
    }) 
    .state('DocumentoMasterView.C', { 
     url: '/submenu', 
     templateUrl: 'route2.C.view.html', 
     controller: 'myAppController' 
    }) 

}); 

myapp.controller('myAppController',['$scope','$state',function($scope, $state){ 
     $scope.tabs = [ 
      { heading: 'A View', route:'DocumentoMasterView.A', active:true}, 
      { heading: 'B View', route:'DocumentoMasterView.B', active:false }, 
      { heading: 'C View', route:'DocumentoMasterView.C', active:false } 
     ]; 

     $scope.go = function(route){ 
      $state.go(route); 
     }; 

     $scope.active = function(route){ 
      return $state.is(route); 
     }; 

     $scope.$on('$stateChangeSuccess', function() {    
     $scope.tabs.forEach(function(tab) { 
       tab.active = $scope.active(tab.route); 
     }); 
     }); 

Answer 1

내가 작업하는 예를 만들기 위해이 변경 한 우리가 상태 변경이 필요하지 않습니다

를 (그것을 here 확인) 이 경우

// instead of this 
    $scope.go = function(route){ 
     $state.go(route); 
    }; 

    $scope.$on('$stateChangeSuccess', function() { 
     $scope.tabs.forEach(function(tab) { 
      tab.active = $scope.active(tab.route); 
     }); 
    }); 

우리는 탭 선택에 모든 처리해야

// use just this 
    $scope.go = function(t){ 
     $scope.tabs.forEach(function(tab) { 
      tab.active = $scope.active(t.route); 
     }); 
     $state.go(t.route); 
    }; 

는 here 또한

, UI 라우터와 <div ng-controller="myAppController">의 사용 재고 시도하십시오. 작동 할 수 있지만 상태에 따라 모든 부품을보다 효과적으로 정의 할 수 있습니다.

Here

내가 보여 주려고하는 방법을 ... 아니 NG 컨트롤러, 부모 레이아웃 상태 ...

Answer 2

Radim의 대답은 중대하다 그러나 이것은 오래된/비 대한 방법입니다. ui-router에는 컨트롤러의 로직이 아니라보기에서 변경되는 모든 CSS와 상태를 수행하는 활성 상태가 있습니다. 당신의 탐색에서

:

<ul> 
    <li ui-sref-active="active" class="item"> 
    <a href ui-sref="route1">route1</a> 
    </li> 
</ul> 

그리고 그게 전부를! 현재 활성화 된 상태/뷰는 ui-sref-active = "active"클래스를 해당 li 요소에 적용합니다. 여기서 "활성"은 적용되는 클래스 이름입니다.

이 큰 개선이다 Radim_Köhler @

<ul> 
    <li ui-sref-active="active" class="item"> 
    <a href ui-sref="route1">route1</a> 
    </li> 
    <li ui-sref-active="active" class="item"> 
    <a href ui-sref="DocumentoMasterView">DocumentoMasterView</a> 
    </li> 
    <li ui-sref-active="active" class="item"> 
    <a href ui-sref="DocumentoMasterView.A">DocumentoMasterView.A</a> 
    </li> 
    <li ui-sref-active="active" class="item"> 
    <a href ui-sref="DocumentoMasterView.B">DocumentoMasterView.B</a> 
    </li> 
    <li ui-sref-active="active" class="item"> 
    <a href ui-sref="DocumentoMasterView.C">DocumentoMasterView.C</a> 
    </li> 
</ul>