Как динамически связывать вкладки tabbable

Question

Я создаю небольшое приложение, которое сортирует сайты по группам - где группы отображаются в виде вкладок в tabbable navigator (twitter bootstrap). Поэтому предпосылка заключается в том, чтобы новая вкладка появлялась всякий раз, когда вы добавляете новую группу. Это то, что она выглядит на данный момент:

Так та часть, где новые группы появляются работы отлично (что делает их с помощью нг-повтор и пройдя через все группы). Однако, когда я нажимаю на них, вкладки не отображаются, т. Е. Ничего не происходит. Он работал, когда у меня были статические вкладки.

Вот соответствующий 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 и углы, что вызывает проблемы.

Во-первых, код jQuery связывается с <a> s, уже существующим при выполнении сценария; новые (те, которые создает 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() в контроллере)

---

Сказав, что вы» d лучше использовать существующую библиотеку компонентов, например Угловой интерфейс с Bootstrap, как прокомментировал pkozlowski.opensource.