帶有UI-Bootstrap選項卡和UI-Router的Angularjs導航菜單

Question

在這個Plunker中 ，我無法使菜單鏈接和標簽正常工作。 正如您所看到的，我需要點擊兩次“路線1”以從標簽Route2返回，而且當我點擊兩次“路線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

我做了這個改變以使這個例子有效（ 在這里查看 ）

在這種情況下，我們不需要改變狀態

   // 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);
   };

在這里查看

另外，嘗試重新考慮使用ui-router的<div ng-controller="myAppController"> 。 它可以工作，但有了狀態，你可以更有效地定義所有部分。

在這里，我試圖展示如何...沒有ng-controller，父布局狀態......

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元素。 其中“active”是應用的類名。

對於您的特定導航，它看起來像這樣：

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