Javascript 带有UI引导选项卡和UI路由器的Angularjs导航菜单

在中，我无法使菜单链接和选项卡正常工作。 如您所见，我需要单击两次“路线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);
         });
       });

---

我做了此更改以使该示例生效（请检查）

在这种情况下，我们不需要改变状态

   // 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路由器一起使用。它可以工作，但使用状态可以更有效地定义所有部分

---

我试着展示如何。。。没有ng控制器，父布局状态…

Radim的答案很好，但这是一种过时/臃肿的方法。ui路由器具有活动状态，可以从视图中更改所有这些css和状态，而不是在控制器中更改逻辑

在导航中：

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

就这样！当前活动状态/视图将对该li元素应用ui sref active=“active”类。其中“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>

@Radim_öhler这是一个很大的改进，最后一件事：当你点击两次“路线2”时，选项卡内容消失。我引入了另一个功能“重定向”（更新了我的第一个插件），如果选择了路线2，它将始终引导你到第一个选项卡：

$urlRouterProvider.when（“/route2”，“/route2/detail”）希望有帮助；）享受
ui路由器
此解决方案仍然存在一些问题，例如在切换到下一个选项卡时，在同一选项卡上单击两次，并且选项卡未正确呈现。我找到了更好的解决办法，干得好，克里斯。谢谢你的反馈。我真的很感激！如果有一个提琴或普朗克的例子就好了，这样我们就可以很容易地看到它是否有效。