Bootstrap UI AngularJS ui-路由器中的选项卡

Question

我在 AngularJS ui-router 中的 Bootstrap UI 选项卡有一些问题。我想在刷新页面时添加 active class，所以我将选项卡的 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 link 非分配。基本上，您需要传递一些可以赋值的东西，而不是一些本身就是值的东西。您不能重新分配 true 或 false。试试这个

尝试通过您的状态解析注入选项卡数据

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

Bootstrap UI AngularJS ui-路由器中的选项卡

Bootstrap UI Tabs in AngularJS ui-router

javascript

angularjs

angularjs-directive

angular-ui-bootstrap