如何动态链接tabbable选项卡

Question

我正在制作一个小应用程序，按群组对网站进行排序 - 这些群组在tabbable导航器（twitter bootstrap）中显示为标签。因此，前提是，只要添加新组，就会出现一个新选项卡。这就是目前的样子：

因此，新组显示的部分完美地工作（通过使用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>

这是我的控制器代码：

app.factory('groups', function() {
var groups = [];
var groupsService = {};

groupsService.add = function(i_group) {
    var group = {"name": i_group}
    groups.push(group);
};
groupsService.list = function() {
    return groups;
};

return groupsService;
});

function listCtrl($scope,sites, groups) {
    $scope.listSites = sites.list;
    $scope.listGroups = groups.list;
}

总结一下，问题基本上是 - 如何将动态生成的标签链接到动态生成的内容？

Answer 1

您正在混合jQuery代码和Angular，这会导致问题。

首先，jQuery代码绑定到脚本执行时已存在的<a>;新的（Angular创建的那些）将不会获得事件处理程序。你会想要这样的东西：

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

但你还在混合使用Angular / jQuery。它可能不起作用，或者工作funkilly，因为$scope.$apply()没有被调用。更好的方法是在选项卡中使用ng-click并在控制器中处理事件：

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

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

---

话虽如此，您最好使用现有的组件库，例如：带有Bootstrap的Angular UI，由pkozlowski.opensource评论。