Question

http://plnkr.co/edit/F5jojPEBVaAIyMa0CXDw

我遇到问题让ui-router将片段加载到引导标签主体中。我链接了上面的代码示例。如果我错过了什么，请告诉我。我已经看了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'
          }
        }
      });
  })

Answer 1

plunker

＆＃13;

<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>

＆＃13;

Answer 2

您应该设置这样的状态：

    $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> 请注意，我删除了=＆＃34;标签＆＃34;。您可以根据需要将控制器添加到嵌套选项卡状态，例如：

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

angularjs：ui-router（嵌套视图）和bootstrap标签不好玩

2 个答案: