AngularJS ui-router 中的引导 UI 选项卡

Question

AngularJS ui-router 中的 Bootstrap UI 选项卡有一些问题。我想在刷新页面时添加活动类，所以我将选项卡的 URL 发送到 asActive(url) 函数中，作为参数到我的控制器，在那里我将该选项卡的 URL 与整个页面的当前 URL 进行比较。它工作正常。我使用选项卡指令的“active”参数，即与“=”绑定。

当我刷新页面时 - 一切正常，但是当我单击选项卡窗格时，控制台出现错误。

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

您应该检查未分配的this 链接。基本上，您需要传入可以分配值的东西，而不是值的东西。您不能重新分配真或假。试试这个

尝试通过你的状态解析注入标签数据

$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 并根据需要在解析中填充选项卡数据。这与选项卡文档中的示例非常相似。