Unable to set the active tab using $rootScope

Question

Unable to set the active tab using $rootScope

Is there anyone who can assist me with the issue I am currently facing? I have a NavCtrl to manage my active tags, and although I was able to change the active tab when clicking on the menu item, it does not update when clicking on links in the body views.

//controller for navigation menu
sp.controller('NavCtrl', ['$scope', 'auth', '$window','$rootScope', function ($scope, auth, $window,$rootScope) {
    $scope.LogOut = auth.logOut;
    $scope.isLoggedIn = auth.isLoggedIn;
    $scope.tab = $rootScope.navTav;

    $scope.toTop = function(){
        $window.scrollTo(0, 0);
    };
}]);

I attempted to use $rootScope to set the navTab, but unfortunately, it did not resolve the issue.

//setting root scope
sp.run(function($rootScope) {
    $rootScope.navTav = 1;
})

ui-Router

.state('qaanswer', {
    url: '/qa/{quesId}',
    views: {
        view50': {
            templateUrl: './qa/qaanswer.html',
            controller: 'QAAnswerCtrl'
        },
        'view60': {
            templateUrl: './shareviews/activityupdates.html',
            controller: 'HomeCtrl'
        }
    },
    onEnter:['$rootScope',function($rootScope){
        $rootScope.navTav = 5;
    }]

I appreciate any assistance provided. Thank you.

javascript angularjs angularjs-scope angular-ui-router

Answer 1

Answer №1

Latest HTML Update:

  <body ng-controller="NavCtrl">
    <!-- Desktop Menu Section -->
    <div>
      <div>
        <ul>
          <a href="#/about" ng-class="{active: navTab === 1}" ng-click="navTab = 1">
            <li>About</li>
          </a>
          <a href="#/contact" ng-class="{active: navTab === 2}" ng-click="navTab = 2">
            <li>Contact</li>
          </a>
        </ul>
      </div>
    </div>
    <div>
      <div>
        <div class="row">
          <div ui-view="view50"></div>
          <div ui-view="view60"></div>
        </div>
      </div>
    </div>
  </body>

Clickable plunker

Answer 2

Latest HTML Update:

  <body ng-controller="NavCtrl">
    <!-- Desktop Menu Section -->
    <div>
      <div>
        <ul>
          <a href="#/about" ng-class="{active: navTab === 1}" ng-click="navTab = 1">
            <li>About</li>
          </a>
          <a href="#/contact" ng-class="{active: navTab === 2}" ng-click="navTab = 2">
            <li>Contact</li>
          </a>
        </ul>
      </div>
    </div>
    <div>
      <div>
        <div class="row">
          <div ui-view="view50"></div>
          <div ui-view="view60"></div>
        </div>
      </div>
    </div>
  </body>

Clickable plunker

Answer 3

Answer №2

To simplify your implementation and prevent any issues, consider using the $rootScope variable directly in your template with ng-class:

<body ng-controller="NavCtrl">
    <a ng-class="{red: $root.navTab===0}" ui-sref="first">first</a>
    <a ng-class="{red: $root.navTab===1}" ui-sref="second">second</a>
    <div ui-view></div>
</body>

Remember to update $rootScope in your controllers:

.controller('NavCtrl', function($scope, $rootScope) {});

.controller('FirstCtrl', function($scope, $rootScope) {
    $rootScope.navTab = 0;
});

.controller('SecondCtrl', function($scope, $rootScope) {
    $rootScope.navTab = 1;
});

Your state definitions remain straightforward:

.state('first', {
    url: '/first',
    templateUrl:  'first.html',
    controller: 'FirstCtrl'
})
.state('second', {
    url: '/second',
    templateUrl:  'second.html',
    controller: 'SecondCtrl'
})

Check out Plunker for a demo.

In an ideal scenario, create a directive for this task to avoid reliance on $rootScope. One approach is to broadcast a message upon navigating to a new page, then have the tab directive listen for that event and activate the appropriate tab.

Answer 4

To simplify your implementation and prevent any issues, consider using the $rootScope variable directly in your template with ng-class:

<body ng-controller="NavCtrl">
    <a ng-class="{red: $root.navTab===0}" ui-sref="first">first</a>
    <a ng-class="{red: $root.navTab===1}" ui-sref="second">second</a>
    <div ui-view></div>
</body>

Remember to update $rootScope in your controllers:

.controller('NavCtrl', function($scope, $rootScope) {});

.controller('FirstCtrl', function($scope, $rootScope) {
    $rootScope.navTab = 0;
});

.controller('SecondCtrl', function($scope, $rootScope) {
    $rootScope.navTab = 1;
});

Your state definitions remain straightforward:

.state('first', {
    url: '/first',
    templateUrl:  'first.html',
    controller: 'FirstCtrl'
})
.state('second', {
    url: '/second',
    templateUrl:  'second.html',
    controller: 'SecondCtrl'
})

Check out Plunker for a demo.

In an ideal scenario, create a directive for this task to avoid reliance on $rootScope. One approach is to broadcast a message upon navigating to a new page, then have the tab directive listen for that event and activate the appropriate tab.

Unable to set the active tab using $rootScope

Answer №1

Answer №2

Similar questions

What is preventing the buttons from filling the entire space of the parent element in this case?

Exploring the depths of deep populating in Mongo and Node.js

It seems like the method has already been executed despite encountering an unexpected end of JSON input error

I encountered an issue with route handlers in Next.js version 13.2. Sadly, they are not

Tips for keeping a reading item in place while scrolling

What is the best approach to restructuring this code with an excessive number of $routeProvider routes in a single file?

Tips for automatically filling in user-entered form values in AngularJS in the event of a failed REST API call

Utilizing Ajax technology to load script in Tapestry 5

How can I properly reset a timeout duration?

How can we implement :focus-within styling on Material-UI Select when the input is clicked?

Ensure that each item rendered in a VUE.js v-for loop is distinct and not repetitive

Utilize the same controller and view for both searching and non-searching functionality within Angular

Make the mp3 file automatically download/save as by forcing the link

AngularJS: dual occurrence of stateChangeStart without stateChangeSuccess

"Autocomplete disable" feature malfunctioning on the final input field of all web pages

The MTM test runner is failing to identify AJAX callbacks

Hiding divs toggle off when either all or only one is selected

Create a selection menu in an HTML dropdown list using unique values from a JSON object that is separated by commas

Deactivate a chosen anchor button when clicked within a loop of elements

WebSocket functionality in Node.js utilizing the ws module from npm