Angular.js update URL on ng-click

After reading various posts on the same subject, I am still struggling to get my own code to work. My goal is to change the location of my app upon a ng-click event. Here is the html code I have:

<button class="button icon-left ion-plus-round button-block button-calm" ng-click="send({{foods.cal}})">
    Add Calories
</button>

And this is what my controller looks like:

.controller('foodDetailCtrl', function($scope, $stateParams, $location, foods) {
$scope.foods = foods.get($stateParams.foodsId);

$scope.send = function(i) {
// do something with 'i'

$location.path('/calc');

}

})

However, when I click on the button in my html, the location refreshes to a home tab instead of finding '/calc'. I've attempted different variations, such as adding parent folders or file extensions to 'calc', but nothing seems to work. Any assistance would be greatly appreciated.

Answer №1

give this a shot

in your webpage code

ng-click="send($event, foods.cal)"

control flow

$scope.send = function(event, i) {
event.preventDefault();
// perform action with 'i'

$location.path('/calc');

}

consider using $state

instead of $location.path('/calc') try $state.go('tab.calc')

Answer №2

Here is a suggestion for you:

app.config(function($routeProvider) {
    $locationProvider.html5Mode(true);
});

You may also want to consider including a base tag in the head section of your HTML document. http://www.w3schools.com/tags/tag_base.asp

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

Updating an Angular $watchCollection when modifying an Attribute: A step-by-step guide

Hey there, I've encountered a small issue while updating an attribute of an array of objects in my parent controller. The $scope.items variable holds an array of objects. $scope.items = Ticket.items; $scope.$watchCollection('items', funct ...

Exploring the advanced features of OpenOffice Draw for improved geometry analysis

Struggling with the draw:enhanced-geometry section that involves draw:enhanced-path and draw:equation. I'm working on an OOo converter but can't seem to find any concrete solutions or extensive documentation about this part. Any suggestions on ho ...

angular and node: troubleshooting the $http.get error

I have encountered an issue with the $http.get instruction. Without it on the main page, I receive a result of "random 46" which is correct. However, when I include $http.get, I get a result of "random {{ number }}". How can this problem be resolved? -se ...

The current error message states that the function is undefined, indicating that the Bookshelf.js model function is not being acknowledged

I have implemented a user registration API endpoint using NodeJS, ExpressJS, and Bookshelf.js. However, I encountered an error while POSTing to the register URL related to one of the functions in the User model. Here is the code snippet from routes/index. ...

Save a collection of controller instances within a separate controller in AngularJS

I am in need of an angular example where one controller wraps another. For instance, I am looking to divide some logic between EndpointListController and EndpointController. EndpointListController will handle retrieving data from storage, along with funct ...

Achieving a function call within a Backbone view in Backbone.js

Is it possible to call the plotPort function from the plotLoc function using this.plotPort() instead of self.plotPort()? It seems to not work for Internet Explorer when using self.plotPort(). As a workaround, I added an event to lLoca upon reset to call ...

What distinguishes {key:" "} from {key:" "}, when it comes to JSON files?

I have been working on implementing validation using express Router. The issue I encountered is that when I pass {title:""}, the express-validator does not throw an error. However, when I pass {title:" "}, it works properly. exports.postValidatorCheck = [ ...

Deleting items from an array in ReactJS

When retrieving a list of users from AWS Cognito, everything works flawlessly. However, the task of iterating over this array and removing users that do not match a specific Client ID is where I'm facing difficulties. What am I doing wrong in this sc ...

Tips for executing getJSON requests one after the other

My goal is to showcase a weather forecast for a specific date on my website. Here are excerpts from the code I've used on a trial page that isn't functioning correctly: <script> function displayWeather(date){ $.getJSON(url + apiKey + "/" ...

Steps for assigning a texture to a child Mesh within an Object3D

My Object3D was imported in the following manner: var customObject; // defining a global object var loader = new THREE.ObjectLoader(); loader.load('path/to/object3d.json', function(object) { customObject = object; scene.add(customObject ...

Reduce the size of a container element without using jquery

In my Angular application, I have structured the header as follows: -- Header -- -- Sub header -- -- Search Box -- -- Create and Search Button -- -- Scroll Div -- HTML: <h1> Header </h1> <h3> Sub header </h3> <div class="s ...

Decoding PDF417 Barcodes with ZXing.NET using HTML5 Video

I'm currently exploring the use of jQuery/JavaScript in conjunction with ZXing.NET to decode a PDF417 barcode from a video source. Below is the HTML I am working with: <video id="video" width="800" height="800"></video> <canvas id="ca ...

Why is URL Hash Navigation not functioning when linking to a different page's slide on the carousel?

Why isn't the #tag link being recognized? Even though the data-hash items are visible in the URL window, the script doesn't seem to pick them up. The standard script used on the carousel page is as follows: $(document).ready(function() { $( ...

The issue with Grid component in Nested Single file Component

I'm currently working on creating a grid component in Vue to set up a sortable and searchable chart using Single File Component. I've also integrated vue-router into the project. Below are my two .vue files. At the moment, I can only see the sear ...

Ways to avoid automatic error correction when running npm lint?

Utilizing the Vue CLI, I developed a Vue3 app with a Prettier/Eslint configuration. Upon making changes to the main.ts file as shown below: import { createApp } from "vue"; import App from "./App.vue"; import router from "./router& ...

Tips for updating documents in MongoDB using NodeJS

I'm trying to update the document using the command below. order = await db.collection("orders").findOneAndUpdate({ order_id: req.body.ORDERID }, {$set: { payment_status: "Paid", paymentInfo: JSON.stringify(myrequest) }}) console. ...

Identify and click on the child span within the li element using Cypress

I am struggling to select a li element and click/check on the span with the checkbox class, but I can't seem to make it work. Here is what I have attempted: <div id="list-widget"> <ul class="tree"> <li class ...

What is the best way to implement a useState within a context for testing with jest?

function CustomComponent() { const {val, change} = useContext(ProviderContext) return ( <TextField> onChange={({target}) => { change(target) }} value={val} </TextField> ); } describe('test', ( ...

Using React, a link to the same component is created, but a subcomponent is mistakenly using an outdated version of

Here, we have a SubComponent and a MainComponent created to showcase an image collection. The Subcomponent allows you to toggle between pictures in the collection using the onclick() event. The MainComponent also includes links to other collections, which ...

The passport.use method is failing to invoke in Node.js when utilizing the passport-local strategy

Upon calling the login and submitting the form, it seems that the use.authenticate() method is not being executed and no error messages are displayed. Server.js code snippet: const passport=require('passport'); const Strategy=require('pass ...