Using AngularJS ui-router to implement Bootstrap UI tabs

Question

Using AngularJS ui-router to implement Bootstrap UI tabs

Having trouble with Bootstrap UI Tabs in AngularJS ui-router. Trying to add an active class when refreshing the page. Passing the tab's URL to the asActive(url) function in my controller to compare with the current URL of the page. Using the "active" parameter of the tab directive, which is bound with "=".

Refreshing the page works fine, but clicking on the tab pane results in an error in the console.

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

My HTML code:

<tabset justified="true">
    <tab heading="DV Group" ui-sref="configuration.dv-group" active="isActive('configuration.dv-group')">
        <div ui-view></div>
    </tab>
    <tab heading="Partnership 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 the controller:

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

Any solutions to this issue? Thank you in advance.

javascript angularjs angularjs-directive angular-ui-bootstrap

Answer 1

Answer №1

For more information on non-assignable values in AngularJS, please refer to this link. Essentially, make sure you are passing in a variable that can be assigned a value, not a static value like true or false.

One solution is to pass the tab data through your state resolve like this:

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

Make sure to update your HTML to incorporate the resolved data:

<tabset justified="true">
    <tab heading="DV Group" ui-sref="configuration.dv-group" active="tabs[0].active">
        <div ui-view></div>
    </tab>
    <tab heading="Partnership 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>

Remember to inject the resolve into your controller:

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

By following this approach, you can also dynamically populate tab data using ng-repeat based on the state. This aligns closely with the tab example provided in the AngularJS documentation.

Answer 2

For more information on non-assignable values in AngularJS, please refer to this link. Essentially, make sure you are passing in a variable that can be assigned a value, not a static value like true or false.

One solution is to pass the tab data through your state resolve like this:

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

Make sure to update your HTML to incorporate the resolved data:

<tabset justified="true">
    <tab heading="DV Group" ui-sref="configuration.dv-group" active="tabs[0].active">
        <div ui-view></div>
    </tab>
    <tab heading="Partnership 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>

Remember to inject the resolve into your controller:

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

By following this approach, you can also dynamically populate tab data using ng-repeat based on the state. This aligns closely with the tab example provided in the AngularJS documentation.

Using AngularJS ui-router to implement Bootstrap UI tabs

Answer №1

Similar questions

Switch out the image source and add attributions until the AJAX call is complete

In AngularJS, the execution of a subsequent AJAX call is reliant on the response of a preceding AJAX

Modify the hyperlink address in the body of the webpage using jQuery

Utilize only certain JSON properties within JavaScript

Modifying an object using setState in React (solidity event filter)

Transform an object into an array using JavaScript with the help of Lodash, Azure Functions, and Azure Logic Apps

What could be causing the malfunction in my JavaScript random selector?

Ways to retrieve information from a request handler

Tips on effectively utilizing a function within middleware in Node.js

Include a new variable in a JavaScript email template

What is the correct way to apply styles universally instead of using "*" as a selector?

Exploring the usage of multidimensional arrays in React components

Tutorial on displaying historical pricing data on a chart utilizing props in Vue Chartkick

Scrolling and adjusting window size while perfectly displaying images pixel by pixel using php and javascript

Tips for creating a substitute for a standard prototype in JavaScript

Obtain the computed style by utilizing setTimeout for effective functionality

Retrieving POST request headers in Nightmare JS following a click() function execution and a wait() function delay

Update ng-repeat in AngularJS

Tips for showing HTML content in an Angular UI grid

Scale up each image with the use of Java script