Question

我应该如何实现这个：

打开onclick并将视图加载到孩子的4个标签。

尝试使用4 ng-view标签并隐藏其中3个，但感觉不对。我应该如何在正确的标签中显示我的内容？

<section id="tabs">
    <div class="tab open">
        <div ng-view></div>
    </div>
    <div class="tab">
        <div ng-view></div>
    </div>
    <div class="tab">
        <div ng-view></div>
    </div>
    <div class="tab">
        <div ng-view></div>
    </div>
</section>

Answer 1

您应该使用bootstrap作为标签，使用ng-include作为内容像这样的东西

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="http://code.angularjs.org/1.2.12/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-cookies.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-route.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-resource.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</head>

<body>

<div class="container">

<!-------->
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
        <li><a href="#orange" data-toggle="tab">Orange</a></li>
        <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <div ng-include src="'red.html'"></div>
        </div>
        <div class="tab-pane" id="orange">
             <div ng-include src="'orange.html'"></div>                
        </div>
        <div class="tab-pane" id="yellow">
            <div ng-include src="'yellow.html'"></div>
        </div>
    </div>
</div>


<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('#tabs').tab();
    });
</script>    
</div> <!-- container -->

<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>

</body>
</html>

Answer 2

Angular UI bootstrap module将所有twitter引导程序组件移植为角度模块。你应该使用它而不是重新发明它（除非你不能/不想使用twitter bootstrap）。

tldr：尝试使用角度UI引导程序中的bootstraps选项卡组件

AngularJS标签内容

2 个答案: