带UI-Bootstrap选项卡和UI-Router的Angularjs导航菜单

Question

在this Plunker中，我无法使菜单链接和选项卡正常工作。 正如你所看到的，我需要点击两次“路线1”从标签路线2返回，而且当我点击两次“路线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

此外，尝试使用<div ng-controller="myAppController">与UI路由器重新考虑。它可以工作，但是有了状态，您可以更有效地定义所有部件。

Here我试图展示如何......没有NG-控制器，家长布局状态...

Answer 2

拉迪姆的答案是伟大的，但，这是一个过时/臃肿的方法。 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>