在AngularJS UI -router中引导UI选项卡

Bootstrap UI Tabs in AngularJS ui-router

本文关键字：UI 选项 AngularJS -router      更新时间：2023-09-26

我在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);
};
有人知道这个问题的解决方法吗?

您应该在non assign上检查此链接。基本上，你需要传入一些可以赋值的东西，而不是一个值。你不能重新赋值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并根据状态在解析中填充选项卡数据。这与文档中tab的示例非常相似。

相关文章：