与UI的引导标签和UI的路由器Angularjs导航菜单 [英] Angularjs navigation menu with UI-Bootstrap tabs and UI-Router

问题描述

在这Plunker ，我无法让菜单和链接选项​​卡才能正常工作。
正如你可以看到我需要点击两次1号线，从标签Route2到回去，而且当我点击两次2号线菜单链接，标签内容不渲染。

我觉得这是code的相关部分的事项：

  myapp.config（函数（$ stateProvider，$ urlRouterProvider）{  $ urlRouterProvider.otherwise（/）;  $ stateProvider
    .STATE（'ROUTE1'，{
      网址：/，
      templateUrl：route1.html
    }）
    .STATE（'DocumentoMasterView'，{
      网址：/路径2
      templateUrl：route2.html
      控制器：'myAppController
    }）
    .STATE（'DocumentoMasterView.A'，{
      网址：'/细节，
      templateUrl：route2.A.view.html'，
      控制器：'myAppController
    }）
    .STATE（'DocumentoMasterView.B'，{
      网址：'/形象，
      templateUrl：route2.B.view.html'，
      控制器：'myAppController
    }）
    .STATE（'DocumentoMasterView.C'，{
      网址：'/子'，
      templateUrl：route2.C.view.html'，
      控制器：'myAppController
    }）}）; myapp.controller（'myAppController'，['$范围，$州'，函数（$范围，$州）{
        $ scope.tabs = [
           {标题：A视图，路径：DocumentoMasterView.A'，活跃：真正}，
           {标题：'B查看，路径：DocumentoMasterView.B'，活跃：假}，
           {标题：'C查看，路径：DocumentoMasterView.C'，活跃：假}
        ];        $ scope.go =功能（路线）{
           $ state.go（路线）;
        };        $ scope.active =功能（路线）{
           返回$ state.is（路线）;
        };       $范围。在$（'$ stateChangeSuccess'，函数（）{
         $ scope.tabs.forEach（功能（标签）{
               tab.active = $ scope.active（tab.route）;
         }）;
       }）;
 

解决方案

我做了这个变化，使这个例子工作（检查它的这里）

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

  //而不是这个
   $ scope.go =功能（路线）{
       $ state.go（路线）;
   };   $范围。在$（'$ stateChangeSuccess'，函数（）{
       $ scope.tabs.forEach（功能（标签）{
           tab.active = $ scope.active（tab.route）;
       }）;
   }）;
 

我们应该处理所有的选项卡上选择

  //使用这个刚
   $ scope.go =功能（T）{
       $ scope.tabs.forEach（功能（标签）{
           tab.active = $ scope.active（t.route）;
       }）;
       $ state.go（t.route）;
   };
 

检查一下这里

此外，尝试使用＆LT的重新思考; DIV NG控制器=myAppController＆GT; 与UI的路由器。它可以工作，但与各国可以更有效地定义所有的部件。

这里我试图展示如何......不NG-控制器，家长布局状态...

In this Plunker, I'm unable to make menu links and tabs to work properly. As you can see I need to click twice the 'Route 1' to go back from tabs Route2, moreover when I click twice the 'Route 2' menu link, the tabs content is not rendered.

I think this is the relevant part of the code that matters:

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

解决方案

I've made this change to make that example working (check it here)

we do not need state change in this case

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

we should handle all the on tab selection

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

Check it here

Also, try to reconsider using of the <div ng-controller="myAppController"> with ui-router. It could work, but with states you can define all the parts more effectively.

Here I tried to show how to... no ng-controller, parent layout state...

这篇关于与UI的引导标签和UI的路由器Angularjs导航菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！