Question

我正在使用角度ui-bootstrap库，但我不知道如何为每个标签指定自定义 href 。

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

在角度ui-bootstrap文档中，指定了一个可选参数 select（），但我不知道如何使用它来自定义每个标签的链接

另一种重新定义问题的方法是如何使用带角度ui-bootstrap选项卡的路由

Answer 1

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

1）在控制器中定义标签href：

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

2）声明一个改变控制器中散列的函数：

$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>

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

Answer 2

使用angular-ui-router时，只需要添加一个ui-sref属性。 e.g。

<tabset>
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}"
    active="tab.active" ui-sref="stateName({param:somevalue,param2:tab.somekey})" /></tabset>

Answer 3

为了避免$ rootScope：infdig错误，我按照说明将功能更改为：

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

但请记住在控制器中注入$ location服务。

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

3 个答案: