1

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.

1 Answer 1

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.

3
  • 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
    – Vlad Turak
    Aug 27, 2015 at 13:54
  • 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)
    – Sunde
    Aug 27, 2015 at 14:00
  • Thanks, I've understood my mistake.
    – Vlad Turak
    Aug 27, 2015 at 14:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.