0

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

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

4

1 回答 1

2

您正在混合 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 所评论的那样。

于 2013-10-01T11:26:13.827 回答