angular-ui-bootstrap - 如何为angular ui-bootstrap tabs指令指定href参数

Question

我正在使用 angular ui-bootstrap 库，但我不知道如何指定自定义 href 对于每个选项卡。

<tab ng-repeat="tab in tabs" active="tab.active" heading={{tab.name}}></tab> 

在 angular ui-bootstrap 文档中，可选参数 选择()已指定，但我不知道如何使用这是自定义每个选项卡的链接

改写问题的另一种方法是如何使用带有角度 ui-bootstrap 选项卡的路由

Answer 1

我希望现在还不算太晚，但我今天遇到了同样的问题。您可以通过以下方式实现:

1)在 Controller 中定义标签hrefs:

$scope.tabs = [
  { title:"tab1", href:"#/route1/page1" },
  { title:"tab2", href:"#/route1/page2" }
];

2)声明一个函数来改变 Controller 中的散列:

$scope.changeHash = function(data) {
  window.location.hash = data;
};

3) 使用以下标记:

  <tabset>
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}"
        active="tab.active" select="changeHash(tab.href)" />
  </tabset>

我不确定这是否是最好的方法，我很想听听其他人的意见。