What is the best way to assign an active class to a specific footer ID on an HTML page using AngularJS?

I tried using the activeLink directive to apply an active class to a specific id on the page, but it didn't work as expected.

.directive('activeLink', ['$location', function (location) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs, controller) {
        var active = attrs.activeLink;
        var path = attrs.href;
        path = path.substring(1); //adjusting for hashbang
        scope.location = location;
        scope.$watch('location.path()', function (newPath) {
          if (path === newPath) {
            element.addClass(active);
          } else {
            element.removeClass(active);
          }
        });
      }
    };
  }])

In my navigation bar, Home, About and Products pages are working fine with the active class. However, in the footer section of the home page, the "Contact" link does not get the active class applied. How can I resolve this?

<ul class="nav navbar-nav">
    <li><a active-link="active" href="#/" target="_self">Home</a></li>
    <li><a active-link="active" href="#/about" target="_self">About</a></li>
    <li><a active-link="active" href="#/products"  target="_self">Products</a></li>
    **<li><a active-link="active" ng-click="scrollTo('contact')" href="#/#contact" target="_self">Contact Us</a></li>**


</ul>

Answer №1

Modify the restrict: 'A' to restrict: 'E'

Double check if you have included the footer within ng-app when writing ng-app.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing AngularJS to invoke a jQuery plugin

Currently, I am utilizing the fullCalendar jQuery plugin alongside AngularJS. My goal is to call the refetchResources function of the jQuery plugin from Angular. I attempted to achieve this using the following code: angular.element(document.querySelector ...

Learn how to showcase a modal pop-up in AngularJS by utilizing the ng-if directive

Hello, I am new to working with AngularJS. My question is how can I display a modal pop-up box when the ng-if statement evaluates to false? Can you please provide guidance on how to solve this issue? Here is an example of the code snippet in HTML: <di ...

In Internet Explorer 11, the Content-Type setting is not functional and may cause issues with certain functionalities

My initial attempt to solve the issue involved using the method beginQuoteFileUnquoteUpload1, which created a proper boundary and Content-Type. However, upon receiving the file, I discovered that it was corrupted :( var formData = new FormData(); formD ...

Setting the width of individual Views within a ScrollView to adjust accordingly in React Native

Is there a way to ensure that the Views inside my horizontal ScrollView have the same dimensions as the ScrollView itself? I'd like to implement paging so that swiping takes me to the next View within the ScrollView. I attempted using width : "100%" b ...

Customize the position values of the Ngx-bootstrap Tooltip manually

I have incorporated ngx-bootstrap into my Angular 4 application. The component I am using is ngx-bootstrap Tooltip: After importing it, I am implementing it in my component's view like this: <button type="button" class="btn btn-primary" ...

Implement authentication verification on all child endpoints within an express router

I have an express router set up and I want only authorized users to access its routes. I am currently using passport middleware. Instead of adding a check for req.user in every endpoint, is there a more efficient way to handle this? router.get("/", asyn ...

When using CasperJS to capture multiple screenshots, the most recent screenshot will replace all previous ones

Exploring CasperJS has been a great experience for me. Despite my enjoyment, I've encountered an issue with casper.capture() that has me stumped. I've set it up to capture screenshots whenever a test fails and placed it in a separate setup module ...

What is the best way to extract a portion of a JSON string?

this.on('success', function(file, responseText) { var theID = JSON.stringify(responseText); alert(theID); window.location.href = ('want to put something here'); }); The ...

Sending information from one page to another and then sending it once more

I am currently utilizing the following code to submit a form's data to : <script type="text/javascript"> $(document).ready(function(){ $("#textnextofkin").validate({ debug: false, rules: { ...

Move tables by dragging and dropping them into place

Currently, I am on the lookout for a drag and drop plugin that works with jQuery, Angular, or JavaScript to help me create dynamic tables. Specifically, I need a plugin that allows me to add new tables through drag and drop functionality. While I have com ...

Troubleshooting: AngularJS fails to refresh UI when using SignalR

When I attempt to incorporate this angularjs code into a signalR function, the UI does not update. Even using $scope.$apply() does not trigger a digest. This is the code snippet: var notificationHub = $.connection.progressNotificationHub; notificationHub. ...

How can Selenium interact with various shadow DOM elements within a dropdown menu?

I am attempting to interact with a dropdown menu in order to track activity on the page when clicking on one of its items. Here is an overview of my HTML structure: <slot> #shadowroot <myoption-cmp> #shadowroot <some anchor te ...

Having difficulty accessing `props` in a React JS and Next JS application

Currently, I am developing a React application that utilizes Server Side Rendering. In this project, I am using React Js and Next Js as my primary framework. My goal is to retrieve initial props using the getServerSideProps method by consulting the documen ...

software tool for managing state transitions

Can anyone recommend a superior javascript library for workflows? Right now, I'm utilizing Joint JS, but I require something with a more visually appealing interface (users tend to prefer that). ...

.comment {Visibility:hidden;} is only functioning on one specific page

What could be the reason behind this function only functioning on one page and not the others? The URL in question is . Specifically, the functionality is only active on the contact page while all other pages still display a comment section. ...

Struggling to deal with conditionals in Express

Just starting with Express and I've come across the following code: const { response } = require("express"); const express = require("express"); const app = express(); app.get("/api/products/:id", function (req, res) { ...

"Problem with AngularJS: Unable to display data fetched from resource using ng-repeat

I am currently working on an AngularJS application that retrieves data from a RESTful API using $resource. However, I have encountered an issue where the view is not updating with the data once it is received and assigned to my $scope. As a beginner in An ...

Example using three.js showing issues with external resources failing to load on jsfiddle.net

Currently, I am endeavoring to make progress with this sample project: github.com/josdirksen/learning-threejs/blob/master/chapter-09/07-first-person-camera.html I have made attempts at replicating the code on my personal pages.github.io account and also m ...

Animation of CSS with an image depicting a leaf swaying gently in the breeze

This project was a personal challenge for me, and I am quite satisfied with the approach I have developed. However, I am open to exploring alternative methods if there are any. The website I am working on features a logo that includes an image of a leaf. ...

Updating textures in Three.js

Is there a way to access and modify the data in an exported JSON file using JavaScript? For instance, if I have a material with specific properties like mapDiffuse value that I want to change, how can I achieve this through a JavaScript function? "materia ...