Angular TAB选择打开新页面，而不是在同一页面中打开

angular tab selection opens new page instead of open in the same page

本文关键字：一页 选择 TAB 新页面 Angular      更新时间：2023-09-26

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

我在我的页面中堆叠了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被加载，但在不同的页面。如果不可能，请分享我的想法遵循。

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

演示标签

<div ui-view></div>是救助者…

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

相关文章：