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

Posted 2023-05-09

【中文标题】角度选项卡选择打开新页面而不是在同一页面中打开

【英文标题】：angular tab selection opens new page instead of open in the same page

【发布时间】：2016-12-30 05:54:44

【问题描述】：

如何在同一页面显示标签选择结果？

我在页面中堆叠了 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 无法实现，请与我分享要遵循的想法。

【问题讨论】：

我在您的 codepen 示例中找不到 routeprovider

是..而不是显示纯文本我正在路由到新 URL...

显示您的代码以及routeprovider

【参考方案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>

Demo Tab

【参考方案2】：

<div ui-view></div>是救星……

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