The error message "TypeError: Cannot set property 'href' of undefined" occurred at angular.js line 12520 when trying to set $window.location.href

Has anyone tried using a directive function to redirect when clicking with ng-click?

Here is the HTML code:

<a ng-click="navbarlinksCtrl.clickedfr()" ng-class="{active: clickedfr()}">FR</a><br>
<a ng-click="navbarlinksCtrl.clickeden()">EN</a>

This is the Directive code:

 (function($) {
    'use strict';

    angular
        .module('eeeee')
        .directive('navBarLinks', navBarLinks);

    navBarLinks.$inject = ['CONTEXT'];

    /**
     * Directive for displaying navigation links in the navbar
     */
    function navBarLinks(CONTEXT) {
        var directive = {
            bindToController: {
                activeLanguagesAsLocales: '@',
                current: '@',
                lang: '@',
                userPreferredLanguage: '@',
                siteActiveLanguages: '@'
            },
            controller: NavBarLinksController,
            controllerAs: 'navbarlinksCtrl',
            restrict: 'E',
            scope: {},
            templateUrl: CONTEXT.contextPath + '/modules/reeeeeetemplate/javascript/components/navBarLinks/navBarLinks.tpl.html'
        };

        return directive;
    }

    NavBarLinksController.$inject = ['CONTEXT', '$timeout', 'loginService', 'openPageService', 'globalContextService', 'responsiveService'];

    function NavBarLinksController($location, $window, CONTEXT, $timeout, loginService, openPageService, globalContextService, responsiveService ) {
            var vm = this;

            vm.clickedfr=clickedFr;
            vm.clickeden=clickedEn;

            activate();

            function activate() {
               // add any initialization logic here
            }

            function clickedFr(){
                $window.location.href = "/eeeeee/home";
            }

            function clickedEn(){
                $location.path("/en/home.html");
            }
        }

})();

The error received was "TypeError: Cannot set property 'href' of undefined"

Tried using both $window.location.href and $location.path methods.

Answer №1

After encountering some difficulties, I grew impatient and opted for a simpler solution:

I utilized window.location and to my surprise, it was successful!

Answer №2

When working with AngularJS, make sure to include the following code snippet: $location.path("/home.html");

Answer №3

When constructing your route with $stateProvider, you can navigate to a specific page like this:

$state.go("/fr/home");

Remember to include the $state injection.

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

Saving Labels in Firebase after receiving a POST request for a separate group in Node.js

My system comprises two key collections: posts and tags. The posts collection contains a postId and other relevant metadata, including tags. A typical structure of a post is as follows: { "tags": [ "tag1", "tag2", ... ], ...

When # is eliminated from the angularjs portion of a Codeigniter website's URL, reloading the page may result in a 404 error page not being found. Is this the main issue causing the

When I remove the # from the AngularJS with Codeigniter website URL, the HTML is not loading properly in the main ng-view. This causes an error where the page does not reload. What can I do to overcome this issue? var app = angular.module('main-App&a ...

Using JQuery to Enhance the Highlight Effect: Tips and Tricks

Exploring the functionality of the "highlight" JQuery effect: http://docs.jquery.com/UI/Effects/Highlight You have the ability to modify the background color of any DIV element with a fade in/out effect. However, the provided example demonstrates trigge ...

Unable to modify background color in base website

While working on my project with Next.js, I encountered an issue where creating a button to change the color only affected the base web components' color and not the background color. _app.tsx import '../styles/globals.css'; import type { Ap ...

How can real-time data be fetched or connected to Firebase v9 in the onSubmit function?

Please provide the code in firebase-v9 to fetch the onSubmit function from firestore: const onSubmit = (formData) => { console.log(formData) db.collection('emails').add({ to: formData.to, subject: formData.subject, message: formData.mess ...

Exploring the Power of Angular's Latest Router: Nested Components and Routing

As I experiment with the new angular router, I decided to explore a scenario involving a main component and a nested component. Below is the JavaScript code I created to define these components along with their routes: angular.module('app', [&a ...

Retrieving all the information stored in the tables

I'm struggling with retrieving the content of my table cells. Some cells contain a hyphen (-) and if they do, I want to center the text. I'm facing difficulties with my jQuery code, particularly the if statement which always evaluates to false. ...

Tips on maintaining and hiding the vertical scrollbar when a popup is open, alongside the navigation bar positioned at the top of the page

After reviewing this pen, my goal is to create a popup that maintains access to the navigation bar (hence avoiding Bootstrap's Modal). However, I am facing the challenge of keeping the scrollbar visible while preventing scrolling in the background whe ...

Setting up Angular with Gulp using the most recent version of NodeJS

I've been utilizing the repository A healthy Gulp Setup for setting up Gulp in my AngularJS project. Everything worked fine with an older version of nodejs, but when I switched to a newer version "NodeJS 4.2.2," I encountered numerous dependency erro ...

What is the best approach to updating a single item within a list using React Context?

React context is great, but I feel like there's something missing in my understanding of it. Let's say I have a list of todos and its corresponding provider set up like this: const Home = () => ( <div className="container"> <T ...

Connecting JSON objects based on unique GUID values generated

I am in search of a method to automate the laborious task of linking multiple JSON objects with random GUIDs. The JSON files are all interconnected: { "name": "some.interesting.name", "description": "helpful desc ...

Display or conceal a vue-strap spinner within a parent or child component

To ensure the spinner appears before a component mounts and hides after an AJAX request is complete, I am utilizing the yuche/vue-strap spinner. This spinner is positioned in the parent days.vue template immediately preceding the cycles.vue template. The ...

Turn off scroll bar to create a seamless browsing experience on your website

As I work on creating the frontend for a single-page website with seamless scrolling between divs, I'm looking to eliminate mouse scrolling altogether. I understand that using overflow:hidden; can hide scroll bars, but my goal is to make the page scr ...

When attempting to access index.html, the Express Server responds with a "Page Not Found"

I have encountered a problem while trying to run my Index.html file through an Express server. Despite referring to previously asked questions, I couldn't resolve the issue. The error message 'Cannot GET /' keeps popping up. Below is the sn ...

Retrieve error messages from API while utilizing Next-auth

Is it possible for Next-auth to handle API errors and pass them to the client-side? For example, our mobile app successfully handles API responses indicating incorrect email or password. However, on our website using Next-auth, we want to modify the retur ...

Is it possible to update the value of Select2 as you type?

In my country, the majority of people do not have a Cyrillic keyboard on their devices. To address this issue, I created a function that converts Latin characters to Cyrillic in Select2's dropdown for easier city selection. However, I noticed that the ...

Automatically increase the height of a text area as you type beyond the maximum width limit

Is there a way to dynamically expand the textarea width as I type beyond its maximum set width without displaying a horizontal scrollbar? Here is the HTML code in its rendered form: <textarea name="CatchPhrase" class="inp ...

Ways to access text content in an HtmlTableCellElement

I am currently working on a jQuery tic-tac-toe project and facing an issue with iterating through the board to save the values of each cell in an array. I have tried using .text() and .value(), but both returned undefined index.html: <html> < ...

Utilize the setInterval method to repeatedly call the random function

Can someone assist me in setting a time interval of about 1 second for this function? function random_imglink(){ var myimages=new Array() //insert your desired random images below myimages[1]="/documents/templates/bilgiteknolojileri/standalo ...

Combining for loops and async waterfall for optimal efficiency

Hey there, I'm just starting out with Nodejs and could really use some advice on writing more efficient code. Let me explain my issue. So, I have this function that is utilizing an async waterfall model. My goal is to call this function within a loop ...