The controller in my template is not being passed by the $routeProvider

I attempted to dynamically load a template in Angular using ngRoute... However, I encountered an issue with the following code:

(app.js route configuration)

app.config(function($routeProvider) {
    $routeProvider.when("/password", {
        templateUrl : "../password/index.html",
        controller: 'LoginController',
        controllerAs : 'loginCtrl',
        reloadOnSearch : false
    });
});

This is the HTML template (../password/index.html)

<div class=" et_pb_row et_pb_row_0">
   ....
 <form ng-submit="loginCtrl.controllaPassword()">
   ....
</div>

(app.js controller )

this.controllaPassword = function(){
    alert("kuajia");
};

Currently, the code appears on the main HTML page (login.html) where I declare ng-app, but the alert does not show up.

Answer №1

It appears that your issue lies in your typing. The alias name for your controller (controllerAs) does not match in your HTML template.

To resolve this, consider using the following HTML template:

<div class=" et_pb_row et_pb_row_0">
   ....
 <form ng-submit="LoginCtrl.controllaPassword()">
   ....
</div>

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

Next.js encountered a surprising conclusion to the JSON input

After retrieving data from /api/notes/1, the following JSON object is received: { "id":1, "author":1, "title":"First Note", "excerpt":"Just a note, blah blah blah", "body":"First no ...

Using Puppeteer and Scrapy, this innovative Web Crawler with Scraper combines the power of both

As a newcomer to web technologies, I am faced with the task of crawling and scraping numerous websites that utilize a combination of React, JavaScript, and HTML. These sites collectively contain approximately 0.1 to 0.5 million pages. My plan is to use Se ...

Enhancing Accessibility for the jQuery Countdown Plugin

Seeking to enhance the accessibility of my website's jQuery countdown, I am striving to adhere to WAI-ARIA guidelines. The specified requirements are as follows: Ensure the area is live so it updates dynamically with the countdown display. Avoid re ...

Utilizing jQuery's Chained Selectors: Implementing Selectors on Previously Filtered Elements

DO NOT MISS: http://jsfiddle.net/gulcoza/9cVFT/1/ LATEST FIDDLE: http://jsfiddle.net/gulcoza/9cVFT/4/ All the code can be found in the above fiddle, but I will also explain it here: HTML <ul> <li id="e1">1</li> <li id="e2" ...

Utilizing AngularJS: find a way to access isolated scope variable directly within the element tag

Can I achieve this in any way? app.directive('myDirective',function(){ return { restrict: 'A', scope: { myName:'=myName' } } } . . . <div my-directive my-name="name" ng-class="myName"></div> ...

Using QuerySelector with Angular Directive will throw an error as it is not a recognized

When creating a directive that integrates a jQuery carousel, I want to hide it at the beginning until it is fully ready. Here's the directive code snippet: return { restrict: 'E', replace: true, scope: true, templateUrl: ...

How do I find out the properties of individual components in Material UI?

Learning material ui has been a challenge for me as I struggle to figure out the properties available for each component. For instance, in a tutorial on YouTube, they used the AppBar component like this: <AppBar title="Enter user details" /> But ho ...

Angular/JS - setTimeout function is triggered only upon the occurrence of a mouse click

I'm currently working on a website that calculates the shortest path between two points in a grid utilizing AngularJS. Although I have already implemented the algorithm and can display the colored path, I am facing an issue where the color changes ti ...

Why does the socket.io output only appear after I refresh the page?

Feeling stuck and seeking guidance. After following tutorials, I was able to develop a basic user registration/login app in nodejs/express with the addition of a socket.io chat feature. Upon user login, they are directed to the real-time chat page where i ...

Steps to manage the time delay between mousewheel events triggering

Currently, I am working on a website for a movie production company that showcases their various films in full-screen mode. Each video is listed and there is a function that automatically takes the user to the next video when a mousewheel event occurs. How ...

What is the best way to insert an anchor tag into text using React?

I am working with a variable const linkElement = `Hey this is a link ${<a href="www.google.com">Click me!</a>} that can be clicked}` Currently, it displays as Hey this is a link [Object object] that can be clicked. Is there a way to ...

Is there a way to utilize code to invoke a method of an object? For example, calling MyObject.XVariable(//some function

I have a unique object that gets its data filled from an API call. let MyDog = { Name: 'Dog', } let arrayFunctions; fetchDogsFunctions(dogAPIUrl).then(res => { // The results variable contains an array of functions the dog can do, such as get ...

Is there a way to stop the Firebase web client from altering the error message generated by an https.onRequest function?

I am facing an issue where I cannot retrieve the original message I sent from an "https.onRequest" function in Firebase. The firebase client is rewriting the message based on the error code, making it difficult for me to recover the originally sent body or ...

Phonegap app failing to run Ajax request properly

I have recently updated my Android app using phonegap build to the latest version, cli-5.2.0. Here is a snippet of my config: <preference name="phonegap-version" value="cli-5.2.0" /> Additionally, here is how my overall configuration looks like: & ...

Updating React state from another component - using useState

How can I efficiently update this state in React so that it changes when a specific button is clicked within the <FirstPage /> component? I'm struggling with finding the best approach to accomplish this. Any suggestions? const SignUp = () => ...

It seems like there may be an issue with the React Table Pagination in reactjs

As a newcomer to React JS, I have been utilizing react-table to create a component that can filter, sort, and paginate sample data from a JSON file. If you are interested in the tutorial I am following, you can find it here: Currently, I am encountering ...

Why doesn't the style show up when JavaScript is turned off with Material UI, CSS Modules, and Next.js?

This is my first time diving into Material UI, CSS Modules, and Next.js with a project. Issue: I noticed that when I disable JavaScript in the Chrome DevTools, the styles are not being applied. I'm not sure if this has something to do with Materia ...

I am experiencing issues with the detection of mouseover events on an SVG circle

I am currently working on a d3 map with zoom functionality that displays circles representing different cities. However, I am facing an issue where the mouseover event for the circles (which shows tooltips and clicking reveals some lines) seems to only reg ...

Date selection tool in Bootstrap showing blank field

I am currently working on implementing a bootstrap datepicker to update layer dates on my website. However, I am facing an issue where the calendar dropdown does not appear when I click on the datepicker box and instead it just shows an empty box. My goal ...

What is the best way to group/merge multiple objects that have the same name into a single object (Nesting)?

I have a dataset containing students' names and their marks in different subjects stored as an array of objects. My goal is to merge the data into a single object for each student with matching names, resulting in one record per student. Here is an ex ...