AngularJS:UI-路由器(嵌套视图）和引导选项卡不能很好地播放

angularjs: ui-router (nested view) and bootstrap tabs not playing nice

本文关键字：选项 不能 很好 播放 路由器 UI- 嵌套 视图 AngularJS      更新时间：2023-09-26

http://plnkr.co/edit/F5jojPEBVaAIyMa0CXDw

我在让 ui 路由器将片段加载到引导选项卡正文中时遇到问题。我在上面链接了我的代码示例。如果我错过了什么，请告诉我。我看了 10 个不同的堆栈溢出示例，但没有一个帮助解决了我的问题。

我有一个外部 ui 视图，可以很好地加载初始页面片段。

<div id="view" ui-view></div>

接下来，我有加载的片段（这是设置选项卡的地方）

<div class="row">
  <div class="col-lg-10 col-lg-offset-1">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
      <li ng-repeat="tab in tabs" ui-sref="{{tab.link}}" ui-sref-active="active"><a>{{tab.label}}</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content" ui-view="tabs"></div>
  </div>
</div>

之后，我有两个片段页面，用于测试，其中只有一些文本（request-tab.html和approved-tab.html）

最后，我有路由视图的 js 文件。我省略了控制器以缩短帖子。如果需要，它们会在堆积器上，但它们不应该成为问题。

var app = angular.module("BRAVO", ['ui.router', 'ui.bootstrap', 'ui.bootstrap.tpls']);
app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/requestView/request');
    $stateProvider
    /* Main Views */
      .state('requestView', {
        url: '/requestView',
        templateUrl: 'bravo_home.html',
        controller: 'requestCtrl'
      })
      /*Other states here*/
    /* Tabs */
    .state('requestView.request', {
        url: '/request',
        view: {
          'tabs': {
            templateUrl: 'request-tab.html',
            controller: 'requestTabCtrl'
          }
        }
      })
      .state('requestView.approved', {
        url: '/approved',
        view: {
          'tabs': {
            templateUrl: 'approved-tab.html'
          }
        }
      });
  })

> plunker

<div class="row">
  
    <div class="col-lg-10 col-lg-offset-1">
   		<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
			<li  ui-sref-active="active" ng-repeat="tab in tabs"><a  ui-sref="{{tab.link}}" >{{tab.label}}</a></li>
		</ul>
    
    	<div id="my-tab-content" class="tab-content" ui-view="tabs"></div>
    	   
    </div>
</div>

你应该像这样设置你的状态：

    $stateProvider
    /* Main Views */
      .state('requestView', {
        url: '/requestView',
        templateUrl: 'bravo_home.html',
        controller: 'requestCtrl'
      })
      /*Other states here*/
    /* Tabs */
    .state('requestView.request', {
        url: '/request',
        templateUrl: 'request-tab.html'
     })
    .state('requestView.approved', {
        url: '/approved',
        templateUrl: 'approved-tab.html'
     });

然后，在你的bravo_home.html：<div id="my-tab-content" class="tab-content" ui-view></div>请注意，我删除了 ="选项卡"。您可以根据需要将控制器添加到嵌套选项卡状态，例如：

    // add "controller: 'requestTabCtrl'" to state
    .controller("requestTabCtrl", function($scope) {
        console.log('Hello Request Tab');
    })
    // add "controller: 'approvedTabCtrl''" to state
    .controller("approvedTabCtrl", function($scope) {
        console.log('Hello Approved Tab');
    });
相关文章：