角度选项卡选择打开新页面而不是在同一页面中打开

Question

如何在同一页面中显示选项卡选择结果？

我在页面中堆叠了3个选项卡，生成的html页面加载到新页面中，而不是加载到同一页面中。

我按照下面的样品和它的工作正常，直到它解释的部分。 https://codepen.io/jasoncluck/pen/iDcbh

我在锚标记的href属性中提到了我的URL路径。 例如：

<ul class="nav nav-tabs nav-stacked nav-pills" role="tablist">
    <li ng-class="{'active': view_tab == 'tab1'}">
        <a class="btn-lg" ng-click="changeTab('tab1')" href="/tabl">Tab1</a>
    </li>
    <li ng-class="{'active': view_tab == 'tab2'}">
        <a class="btn-lg" ng-click="changeTab('tab2')" href="/tab2">Tab2</a>
    </li>
    <li ng-class="{'active': view_tab == 'tab3'}">
        <a class="btn-lg" ng-click="changeTab('tab2')" href="/tab3"> Tab3 </a>
    </li>
</ul>

以下是我的路由器部分

    .when('/tabl', {
        controller : 'URLController',
        templateUrl : './views/URL.html'
    })

我可以看到我的控制器和templateURL已加载但在不同的页面中。 如果href不可能那么请分享我的想法。

Answer 1

 (function () { var app = angular.module('myApp', []); app.controller('TabController', function () { this.tab = 1; this.setTab = function (tabId) { this.tab = tabId; }; this.isSet = function (tabId) { return this.tab === tabId; }; }); })(); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container" ng-app="myApp"> <br/><br/><br/> <h1 align="center">AngularJs Tab Example</h1> <section ng-controller="TabController as tab"> <ul class="nav nav-pills"> <li ng-class="{active:tab.isSet(1)}"><a href ng-click="tab.setTab(1)">Tab 1</a></li> <li ng-class="{active:tab.isSet(2)}"><a href ng-click="tab.setTab(2)">Tab 2</a></li> <li ng-class="{active:tab.isSet(3)}"><a href ng-click="tab.setTab(3)">Tab 3</a></li> <li ng-class="{active:tab.isSet(4)}"><a href ng-click="tab.setTab(4)">Tab 4</a></li> <li ng-class="{active:tab.isSet(5)}"><a href ng-click="tab.setTab(5)">Tab 5</a></li> <li ng-class="{active:tab.isSet(6)}"><a href ng-click="tab.setTab(6)">Tab 6</a></li> <li ng-class="{active:tab.isSet(7)}"><a href ng-click="tab.setTab(7)">Tab 7</a></li> <li ng-class="{active:tab.isSet(8)}"><a href ng-click="tab.setTab(8)">Tab 8</a></li> </ul> <hr> <div ng-show="tab.isSet(1)"> <h4>Tab 1</h4> <h6> Description of Tab 1</h6> </div> <div ng-show="tab.isSet(2)"> <h4>Tab 2</h4> <h6> Description of Tab 2</h6> </div> <div ng-show="tab.isSet(3)"> <h4>Tab 3</h4> <h6> Description of Tab 3</h6> </div> <div ng-show="tab.isSet(4)"> <h4>Tab 4</h4> <h6> Description of Tab 4</h6> </div> <div ng-show="tab.isSet(5)"> <h4>Tab 5</h4> <h6> Description of Tab 5</h6> </div> <div ng-show="tab.isSet(6)"> <h4>Tab 6</h4> <h6> Description of Tab 6</h6> </div> <div ng-show="tab.isSet(7)"> <h4>Tab 7</h4> <h6> Description of Tab 7</h6> </div> <div ng-show="tab.isSet(8)"> <h4>Tab 8</h4> <h6> Description of Tab 8</h6> </div> </section> </div> 

演示标签

Answer 2

<div ui-view></div>是救援人员......

这将在父状态模板中呈现子状态。