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

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

解决方法:

我进行了此更改,以使该示例正常工作(选中它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-controller,父布局状态…

标签：angularjs,angular-ui-router,angular-ui-bootstrap,javascript
来源： https://codeday.me/bug/20191029/1958001.html