如何动态链接可选项卡

Question

我正在制作一个按组对网站进行排序的小应用程序 - 组在可选项卡导航器（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>

这是我的控制器代码：

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>s；新的（Angular 创建的）不会获得事件处理程序。你会想要这样的东西：

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

但您仍在混合使用 Angular/jQuery。它可能不会工作，或者工作很有趣，因为$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 评论。