Navigating in AngularJS using View Model (VM)

I need help with redirecting to a different route upon form submission using AngularJS. I keep encountering an error message that says

Cannot read property 'go' of undefined object

Here is the code for my form:

<div class="col-sm-4 col-sm-push-4 margin-top-30">
<form ng-controller="LogonController" data-ng-submit="vm.setDjName()" name="logonForm" novalidate>
<div class="form-group">
<input type="text" name="dj-name" data-ng-model="vm.djName" placeholder="Your DJ Name" class="form-control">
</div>
<button class="btn btn-primary btn-block" data-ng-click="vm.setDjName()" type="button">Login</button>
</form>
</div>

And here is my controller:

(function () {
'use strict';
angular
.module('app.controllers')
.controller('LogonController', LogonController);

LogonController.$inject = [];

function LogonController ($state) {
var vm = this;
vm.setDjName = function () {
$state.go('/video');
}
}

})();

Any suggestions on how to restructure the code to successfully execute the redirect?

Answer №1

You may need to include the $state service by injecting it into your code:

LogonController.$inject = ['$state'];

// or

angular
    .module('app.controllers')
    .controller('LogonController', ['$state', LogonController]);

For more information on Angular dependency injection, check out the official documentation

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

Guidelines for allocating memory for a dense array in Javascript

When utilizing the new Array(size) constructor, it appears that if the value of size is not constant, certain browsers (such as Chrome) may create a sparse array, leading to slower access times compared to using the default constructor. You can see this pe ...

Utilizing a MONGO_URL to efficiently run multiple Meteor applications on a single server

I have successfully deployed a Meteor application on my Ubuntu server using Meteor Up (MUP) and everything is working well. However, when attempting to deploy a second app on the same server, I encounter issues with connecting to MongoDB. The error message ...

Cannot retrieve Global variables when using chrome.tabs.executescript in Chrome 55

After recently updating Chrome to version 55.0.2883.75, I encountered an issue with my self-developed Chrome Plugin used for parsing HTML files. In the plugin, I utilize chrome.tabs.executescript to retrieve data from a background HTML page. Previously, I ...

Can the value in a JavaScript object be updated dynamically when a button is clicked?

In my JavaScript code, there is an object named annualPlan. Whenever a user submits the HTML form for a specific month, I aim to update the value in the object for that particular month accordingly. For instance, if someone submits August 21 and 200, I w ...

Retrieve event information from the AlloyUI Scheduler

I am having trouble retrieving events from the Scheduler. After reviewing their documentation, I learned that I need to implement SchedulerEventSupport in order to do so. Here is how I implemented it: var agendaView = new Y.SchedulerAgendaView(); ...

Is there a way to flip a bezier curve in cytoscape.js?

I am attempting to create edges similar to the following static mock: static representation of desired edges/curves https://i.sstatic.net/uUTdI.png While I can generate "S" shaped curves, I would like them to invert when moving downward from the root no ...

BoxHelper causes BoxGeometry to become enormous

UPDATE Upon further investigation, I discovered that the issue with the oversized box occurs specifically when I attempt to incorporate the HelperBox. To demonstrate this problem, I created a JSFiddle, where the second box's size remains unaffected. ...

Having trouble retrieving all users from the MySQL database users table using Express in ReactJS

Utilizing react-material-dashboard to display Admin statistics. I am aiming to present all users in a table within the admin dashboard. Fetching users from the database using Express results in a GET http://localhost:3001/api/fetchUsers 404 (Not Found) er ...

Merge two arrays together and arrange them in ascending order based on the dateTime field

I have combined two sorted arrays into a new listC. listA = [ {id:"1234435", name:"apple", dateTime_ISO:"2019-01-15 17:27:30"}, {id:"1234435", name:"orange", dateTime_ISO:"2019-01-15 10:25:30"}, {id:"1234435", name:"banana", dateTime_ISO:"2019-01-15 ...

Trouble with launching Jasmine tests within define block in compiled Typescript

Currently, I am immersed in a testing project that involves setting up a pure Javascript Jasmine Karma environment to test a pre-compiled Typescript setup. Despite my efforts, I am facing an issue where the test cases refuse to start running. While the co ...

vue v-if="canEdit" @click.prevent

I have a Vue component called 'test' with specific template and methods. The goal is to make the div clickable only if helper.isEditable is true, otherwise it should be notClickable or touchable. However, I can only retrieve the value of helper. ...

Encountering a problem with the starting seed for the Users database

I encountered an error while trying to create the initial seed. I'm able to seed the role collection successfully but facing issues with seeding the users collection. Can someone assist me in understanding why this error is occurring and how I can res ...

Is there an AngularJS component that can duplicate an element?

Suppose I include the following in my HTML: <div my-doubling-directive> ... Many children elements here ... </div> After executing my directive, I expect the output to be: ... Many children elements here ... ... Many children elements her ...

Using jQuery or JavaScript to clear multiple selections in a multiselect dropdown when a button is clicked

Is there a way to clear the dropdown selections once my function saves data to local storage? You can refer to this fiddle for more details: http://jsfiddle.net/3u7Xj/139/ I already have code in place to handle other form elements: var $form = $("#formI ...

iOS Safari browser does not support changing the caret color in textarea

Seeking a solution to hide the text cursor (caret) from a textarea on iOS browsers like Safari and Chrome. Despite trying the caret-color property, it does not seem to work. Are there any alternative methods to achieve this? One approach I attempted is b ...

Issues with modules || truth value in JavaScript and ExpressJS

Struggling with an unusual issue. I've been trying to troubleshoot it for the past 48 hours, but so far no luck. Can anyone provide some assistance? commands.js module.exports = function Say() { var Web = require('../web/web.js'); if( ...

Adding a feature to AngularJS where you can highlight text within a PDF file directly in the front end or

I recently discovered a fantastic library for PDF creation called jsPDF. This library allows for the creation of various styles of PDF documents. My main query is whether it is feasible to highlight text (and potentially include a link) in an existing PD ...

Choose products and showcase them on a single screen. Send the findings back to the controller

As a newcomer to MVC and still learning Javascript, I understand that my code may not be perfect. Currently, I am working on creating a view where users can select items from a dropdown list and have them dynamically displayed below a button called btnAdd. ...

Checking for non-overlapping number ranges in an array in React/Javascript before submitting

I am faced with a challenge involving a list of values containing start and end address values. I need to ensure that when submitting these values, there are no existing ranges or overlaps within them. [ { "id": 23, "startAddress&quo ...

Attempting to troubleshoot the issues causing my React application to malfunction

Having some trouble with my Spotify project. Every time I search for an artist, I receive an error message saying "illegal redirect_uri." I am also facing a list of coding issues that I am struggling to resolve. Any advice or suggestions would be greatly a ...