Bootstrap UI Tabs in AngularJS ui-router

Question

I have some problem with Bootstrap UI Tabs in AngularJS ui-router. I want to add active class when refresh the page, so I send tab's URL into asActive(url) function, as parametr to my controller, where I compare that tab's URL with current URL of entire page. It works properly. I use " active " parametr of tab-directive, that is bindind with "=".

When I refresh my page - everything is OK, but when I click on the tab pane I got an error in console.

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

So, my 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>

And my controller:

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

Anybody knows solution of this issue? Thanks in advance.

Answer 1

You should check this link on non assign. Basically, you need to have something passed in that can be assigned a value, and not something that is a value. You can't reassign true or false. Try this

Try injecting the tab data through your state resolve

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

where the other states are defined similarly.

Change your html to be

<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>

and inject the resolve into your controller:

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

With this you can also use ng-repeat and populate tab data in the resolve based on the state if you want. This matches very similarly the example in the documentation for tab.