AngularJS ui-router中的Bootstrap UI選項卡

Question

我在AngularJS ui-router中的Bootstrap UI選項卡上遇到一些問題。 我想在刷新頁面時添加活動類，因此我將選項卡的URL發送到asActive（url）函數中，作為對我的控制器的參數，在此我將該選項卡的URL與整個頁面的當前URL進行比較。 它正常工作。 我使用制表符指令的“ active ”參數，即用“ =”綁定的indind。

當我刷新頁面時-一切正常，但是當我單擊選項卡窗格時，控制台出現錯誤。

Expression 'isActive('configuration.partnership-groups')' used with directive 'tab' is non-assignable!

因此，我的html：

<tabset justified="true">
    <tab heading="DV Group" ui-sref="configuration.dv-group" active="isActive('configuration.dv-group')">
        <div ui-view></div>
    </tab>
    <tab heading="Partneship group" ui-sref="configuration.partnership-groups" active="isActive('configuration.partnership-groups')">
        <div ui-view></div>
    </tab>
    <tab heading="Permissions" ui-sref="configuration.permissions" active="isActive('configuration.permissions')">
        <div ui-view></div>
    </tab>
</tabset>

而我的控制器：

$scope.isActive = function (state) {
    return angular.equals(state, $state.$current.name);
};

有人知道這個問題的解決方案嗎？ 提前致謝。

Answer 1

您應在未分配時檢查此鏈接。 基本上，您需要傳入的內容可以分配一個值，而不是一個值。 您不能重新分配是非。 嘗試這個

嘗試通過狀態解析注入選項卡數據

$stateProvider
    .state('configuration.dv-group', {
        // your state stuff
        resolve: {
            tabs: {
                tabs = function() {
                    var tabData = [{ active: true }, { active: false }, { active: false }] 
                    return tabData;
                }
        }
    })
    .state(...)

其他狀態的定義類似。

將您的html更改為

<tabset justified="true">
    <tab heading="DV Group" ui-sref="configuration.dv-group" active="tabs[0].active">
        <div ui-view></div>
    </tab>
    <tab heading="Partneship group" ui-sref="configuration.partnership-groups" active="tabs[1].active">
        <div ui-view></div>
    </tab>
    <tab heading="Permissions" ui-sref="configuration.permissions" active="tabs[2].active">
        <div ui-view></div>
    </tab>
</tabset>

並將解決方案注入您的控制器：

angular.module('yourapp')
    .controller('YourController', ['$scope', 'tabs', function($scope, tabs) {
       $scope.tabs = tabs;
    });

這樣，您還可以根據需要使用ng-repeat並根據狀態在選項卡中填充標簽數據。 這與選項卡文檔中的示例非常相似。