Question

我使用Angular Bootstrap显示四个标签。我希望每次用户选择不同的标签时更新我的（内部）URL，并让这些链接将用户带到该标签。我认为这很简单，但我没有弄清楚如何做到这一点。

每个标签都是一个指令。这是html：

<div>
    <tabset>
        <tab heading = "Users"><back-admin-users></back-admin-users></tab>
        <tab heading = "Pending Purchases"><back-admin-pending></back-admin-pending></tab>
        <tab heading = "Store Settings"><back-admin-settings></back-admin-settings></tab>
        <tab heading = "Store Items"><back-admin-store></back-admin-store></tab>
    </tabset>
</div>

非常感谢任何帮助。谢谢，格雷格

Answer 1

我想在每次用户选择其他标签时更新我的（内部）网址，并让这些链接将用户带到该标签

我不确定是什么意思＆＃34;更新我的（内部）网址＆＃34;

如果您想要添加选择作为查询字符串的标签，那就非常简单了。您创建了一个添加到范围的函数，之后通过提供不同的参数将此函数绑定到每个选项卡，并且该函数使用方法＆＃34; search＆＃34;更新网址。来自$ location service。

示例：

$scope.updateUrlWithTab = function(tabId){ // in your controller
    $location.search({tab: tabId);
};


<!-- in your view -->
<tab heading = "Users" ng-click="updateUrlWithTab(0)">your directive</tab>
<tab heading = "Pending Purchases" ng-click="updateUrlWithTab(1)">your directive</tab>
<tab heading = "Store Settings" ng-click="updateUrlWithTab(2)">your directive</tab>
<tab heading = "Store Items" ng-click="updateUrlWithTab(3)">your directive</tab>

如果您点击＆＃34;用户＆＃34;你会看到你的网址变成：yourUrl？tab = 0

否则，如果你想重定向到另一个页面，除了你使用$ location重定向＆＃34;路径＆＃34;方法

示例：

    var TAB = { // in a service
         Users: 0,
         PendingPurchases: 1,
         StoreSettings: 2,
         StoreItems: 3
    };

    $scope.updateUrlWithTab = function(tabId){ // in your controller
        switch(tabid){
           case YourService.TAB.Users:
               $location.path('#/Users');
               break;
           case YourService.TAB.PendingPurchases:
               $location.path('#/PendingPurchases');
               break;
           case YourService.TAB.StoreSettings:
               $location.path('#/StoreSettings');
               break;
           case YourService.TAB.StoreItems:
               $location.path('#/StoreItems');
               break;
        }
};

如果您点击＆＃34;用户＆＃34;您将看到您的网址变为：yourUrl /＃/ Users

Doc：https://docs.angularjs.org/api/ng/service/ $ location

如果答案不适合您，请向我们提供更多信息，也许是一个我们可以更好地了解您的问题的实际示例。

Angular bootstrap链接到选项卡

1 个答案: