html - 如何将事件类应用于引导选项卡用户界面

Question

我有一个 bootstrap ui tab angularjs 指令，它默认将第一个选项卡设置为事件选项卡。这里的问题是，如果您在第一个选项卡以外的选项卡中，并尝试刷新页面，因为默认事件类在第一个选项卡上，刷新时它显示第一个选项卡为事件。但是，显示的内容将来自正确的选项卡。 Bootstrap 指令:

var configDirectives = angular.module('configDirectives', []);

configDirectives.directive('configTabs', function(){
  return{
  restrict:'A',
  template: '\
  <ul class="nav nav-tabs">\
    <li class="active"><a href="#categories" data-    toggle="tab">categories</a></li>\
<li><a href="#uploadassets" data-toggle="tab">upload assets</a></li>\
<li><a href="#" data-toggle="tab">lorem ipsum</a></li>\
  </ul>'
}});

我的问题是:我们可以动态设置这个事件类而不是在第一个 li 元素中对其进行硬编码吗？

Answer 1

将 ng-class 与自定义变量一起使用:

ng-class="{'active' : selectedType == 'categories'}"

然后 ng-click 以选择事件选项卡(在您的 href 或 div 或其他内容中):

ng-click="selectedTab = 'categories'"

将'selectedType'添加到指令范围

范围:{ selectedType: '='