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.

Sunde · Accepted Answer · 2015-08-27 14:17:08Z

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.

edited Aug 27, 2015 at 14:17

answered Aug 27, 2015 at 13:48

Sunde

3433 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vlad Turak Over a year ago

unfortunately, it won't work, because tab directive has an isolated scope and doesn't have access to controller's scope. I tried this and my tab content didn't apper

Sunde Over a year ago

I'm not sure I agree on this point. You pass in the variable from your controller, and it's bound to the directive isolate scope, so changes to the variable in your controller should be reflected in the tab directive. Ultimately your error is that you need to pass in something that can be assigned (true and false cannot)

Vlad Turak Over a year ago

Thanks, I've understood my mistake.

Collectives™ on Stack Overflow

Bootstrap UI Tabs in AngularJS ui-router

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related