如何动态链接可放置标签

我正在制作一个小型应用程序，它按组排列网站 - 这些组在显示的导航器（twitter bootstrap）中显示为标签。因此，前提是，每当添加新组时，都会显示一个新选项卡。这是它看起来像此刻：如何动态链接可放置标签

enter image description here

那么，新的群体出现的作品完美的部分（用NG-重复，并通过各组的去渲染它们）。然而，当我点击它们时，标签不显示，即没有任何事情发生。它有效，当我有静态选项卡。

下面是相关的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; 
}

概括起来，这个问题基本上是 - 如何链接标签，是否已动态生成到其动态生成的内容？

来源

2013-10-01 stellarossa

您是否考虑过使用http://angular-ui.github.io/bootstrap/中的'tabset'指令？ –

我没有，事实上我几天前才发现有关角度和引导。谢谢，我会研究，但如果有人想提供更多的解决方案，我会非常乐意倾听。 – stellarossa

您正在混合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所述。

来源

2013-10-01 11:26:13

你的jQuery方法的工作原理，但现在你已经提到混合jquery和angular是一个不行，如果你能告诉我selectGroup（）函数是什么样子，那将会很好吗？ :) – stellarossa

（1）像这样混合jQuery + Angular可能会造成麻烦，应该尽量避免。在指令的角度链接函数中混合它们是可以的。（2）您不提供“网站”服务的代码。但是'selectGroup（group）'的概要是以某种方式将'group'参数提供给'sites'，然后'sites'更新'sites.list'。然后该模板将呈现与所选组相对应的网站。 –

如何动态链接可放置标签

回答

相关问题