Javascript 如何动态链接选项卡选项卡

我正在制作一个小应用程序，它可以按组对网站进行排序，组在选项卡导航器（twitter引导）中显示为选项卡。因此，前提是，无论何时添加新组，都会出现一个新选项卡。这就是目前的情况：

因此，显示新组的部分可以完美地工作（通过使用ng repeat并遍历所有组来渲染它们）。但是，当我单击它们时，选项卡不会显示，即没有发生任何事情。当我有静态标签时，它就起作用了

以下是相关的html代码：

<div class="tabbable tabs-left">

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">All websites</a></li>
    <li ng-repeat="group in listGroups()"><a href="#{{group.name}}">{{group.name}}</a></li>
    <li><a href="#group" data-toggle="modal">+Add group</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">
        <table class="table">
            <tr class="row">
                <th align="center">URL</th>
                <th align="center" colspan="2">Actions</th>
            </tr>
            <tr class="row" ng-repeat="item in listSites()">
                <td><font color="{{item.color}}">{{item.url}}</font></td>
                <td>Edit</td>
                <td>Delete</td>
            </tr>
        </table>
    </div>
    <div class="tab-pane" id="Social">asdf</div>
    <div class="tab-pane" ng-repeat="group in listGroups()" id="{{group.name}}">asdf</div>
</div>
<script>
    $('#myTab a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    })
</script>

---

总而言之，问题本质上是——如何将动态生成的选项卡链接到它们也动态生成的内容？

您将jQuery代码和Angular混合在一起，这会导致问题

首先，jQuery代码绑定到执行脚本时已经存在的

s；新的（Angular创建的）将不会获得事件处理程序。您可能需要以下内容：

$("#myTab").on("click", "a", function(e) {
    // same as your code
});

但您仍然在混合Angular/jQuery。而且它可能不会工作，或者工作起来很有趣，因为

$scope.$apply（）

不会被调用。更好的方法是在选项卡中使用

ng单击
，并在控制器中处理事件：

<li ng-repeat="group in listGroups()">
    <a ng-click="selectGroup(group)">{{group.name}}</a>
</li>


{{group.name}


（您必须在控制器中添加
selectGroup（）
方法。）


这样说，你最好使用现有的组件库，比如Bootstrap的角UI，如PkZouLosik.OpSeriSeC.y/P>评论的，你是否考虑过使用<代码> TabSET/Cuth>指令？我没有，事实上，我只在几天前发现了角度和引导。谢谢，我会研究的，但是如果有人想提供更多的解决方案，我会非常乐意倾听。您的jQuery方式很有效，尽管您已经提到混合使用jQuery和angular是一个禁忌，但如果您能告诉我selectGroup（）函数的外观，那将是一件非常好的事情：）（1） 这样混合使用jQuery+Angular可能会带来麻烦，最好避免。可以将它们混合在指令的角度链接函数中。（2） 您不提供
站点
服务的代码。但是
selectGroup（group）
的要点是以某种方式将
group
参数输入
sites
，然后
sites
更新
sites.list
。然后，模板将呈现与所选组对应的站点。
<li ng-repeat="group in listGroups()">
    <a ng-click="selectGroup(group)">{{group.name}}</a>
</li>