Solving an object in ui-router state using ui-sref

Dealing with a large JSON object in an Angular controller and wanting to pass it to the controller of a template that will be displayed in a ui-view. I am aware that parameters can be passed to states using ui-sref, but I do not want this object to be visible in the address bar. Additionally, I know about using the 'resolve' option in state configuration, but I am unsure how to pass data to the 'resolve' function from a link.

Update
If I use $state.go like this:
Router Configuration

state('social.feed.detailed',
     url: '/:activityID'
     templateUrl: 'views/social/detailedactivity.html'
)

In Template

<ums-social-activity ng-repeat="record in SOC_FEED_CTRL.records"
     activity="record"
     ui-sref-active="selected"
     ng-click="SOC_FEED_CTRL.goToDetailed(record)">
</ums-social-activity>

In Controller

$scope.SOC_FEED_CTRL.goToDetailed = (activity) ->
     # here activity is real object
     $state.go('social.feed.detailed', {'activityID':activity.id, 'activity':activity})

Then the 'activity' parameter does not resolve at all.
Update 2
If I modify the route configuration to this:

state('social.feed.detailed',
    url: '/:activityID?activity'
    templateUrl: 'views/social/detailedactivity.html'
)

Then the activity is displayed as the string "[object Object]".

Answer №1

If you want to pass in parameters that do not show up in the URL, you can utilize the ui-router module's $state.go function call. Instead of using the ui-sref attribute, set up an ng-click handler that triggers $state.go(STATE,{'param':JSON}).

Afterwards, make sure to inject $stateParams into your controller, and access the parameter by:

$stateParams.param

This way, you can retrieve your JSON object effectively.

Answer №2

Chances are

    ui-sref-active="selected"

Selected stands for a chosen item

selected.name

or

selected.id

Selected appears to signify a relationship between keys and values. That is my current understanding.

<a ui-sref="itinerary.name({name:person.id})">

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

toggle the outer div along with its corresponding inner div simultaneously

On one of my pages (let's call it "page1"), I have multiple divs, some nested within others. These divs are initially hidden and toggle on when a specific link is clicked (and off when clicked again). To view a nested div, the outer div must be opened ...

Trouble arising from PHP's encoded array

I am encountering an issue with retrieving a value from PHP and passing it to Javascript. The PHP array is encoded like this : echo json_encode($myArray); On the Javascript side, I use the following code within the $.ajax method: success:function (data) ...

Transform the HTML content into a JSON format file

I'm currently developing an online marketplace and trying to convert all product information like name, price, and description into json format. I have a sample code featuring a selection of products displayed in rows. <div class='cakes'& ...

PHP code for printing a JavaScript string containing a single quote

I'm encountering an issue with a script generated by PHP. When there is a single quote in the description, it throws a JavaScript error and considers the string terminated prematurely. print "<script type=\"text/javascript\">\n ...

Attempting to grasp the correct method for understanding For loops

Lately, I've been diving into teaching myself Node.JS and it has been quite an enjoyable experience. However, I've hit a frustrating roadblock that is really causing me some grief. For some reason, I just can't seem to grasp the concept of F ...

Retrieve the file's source and name using AngularJS

Is it possible to retrieve the name, path, and size of a selected file in an input field using AngularJS before uploading it? <input type="file" ng-model="fileContent" on-read-file="showContent($fileContent)" /> $scope.showContent = function($fileC ...

Trouble with implementing Ajax in Express and jquery

My app has a browse page where users can add items as owned or wanted. Currently, when adding an item it redirects back to the general /browse page. However, I want the page to not refresh at all. I'm attempting to achieve this with ajax, but as a beg ...

How to iterate through a JavaScript array in reverse order using a for loop and the array's length property

When looking to iterate through an array with the values [8,7,6,5,4], some may wonder why a for loop using the length of 5 continues to function even though there is no element at index 5 in the array. for(let i=array.length;i>=0;i++){ //do somethin ...

Discover the simplicity of incorporating pagination into an HTML table with Angular Material

My goal is to implement pagination on my webpage, displaying 3 rows per page and enabling navigation through pages using Angular Material pagination. In usersComponent.ts, I retrieved data from an API: import { Component, OnInit, ViewChild } from '@an ...

How can I retrieve the value of a <span> element for a MySQL star rating system?

Source: GitHub Dobtco starrr JS plugin Implementing this plugin to allow users to evaluate a company in various categories and store the feedback in a MySQL database. Enhancement: I have customized the javascript file to enable the use of star ratings fo ...

obtain the image number by extracting a portion of the text

How can I extract the image number from a string using the sub-string function? I have applied the sub-string function to the property below. It returns 3 at the end in Chrome, but it does not work properly in Mozilla. Issue : After "-->", when I check i ...

Error: Unable to update Ember Array - Property 'destroy' cannot be read because it is undefined

Is there a way to efficiently update an Ember Array so that changes in the array reflect in the view? Take a look at this simplified code snippet - cacheArr: Em.A([]), count: 1, updateFxn: function() { this.incrementProperty(count); devObj = Embe ...

Setting a random number as an id in the constructor in Next JS can be achieved by generating a

What steps can be taken to resolve the error message displayed below? Error: The text content does not match the HTML rendered by the server. For more information, visit: https://nextjs.org/docs/messages/react-hydration-error Provided below is the code i ...

Having trouble implementing server-side rendering with Styled-Components in Next JS

I attempted to resolve my issue by reviewing the code and debugging, but unfortunately, I couldn't identify the root cause. Therefore, I have posted a question and included _document.js, _app.js, and babel contents for reference. Additionally, I disa ...

How can PHP effectively interpret JSON strings when sent to it?

When working with JavaScript, I am using JSON.stringify which generates the following string: {"grid":[{"section":[{"id":"wid-id-1-1"},{"id":"wid-id-1-4"}]},{"section":[{"id":"wid-id-1-5"}]},{"section":[{"id":"wid-id-1-2"},{"id":"wid-id-1-3"}]}]} I am ma ...

What are the steps to ensure synchronous angular ajax calls?

function SubmitIdeaEvaluation(evaluationForm, ideaId, stageId, isEvaluated) { return $http({ url: SparkApp.FormEvaluation.SubmitIdeaEvaluation, method: "POST", contentType: "application/x-www-form ...

Guidance on loading JSON array information into highcharts using AngularJS

I am working on a project in Play Framework (play-java) where I need to display a bar graph using Highcharts. The Java API returns data in JSON format with a field called 'name' containing values like 'Data', 'Gadgets', ' ...

Is it possible to manually trigger a version change transaction in IndexedDB?

I have been working on a Chrome extension that uses the IndexedDB to store data client-side in an IDBObjectStore within an IDBDatabase. The data structure requires users to be able to modify the object store freely, such as adding new objects or modifying ...

Something is overriding the style created by makestyle material UI that I had implemented

How can I increase the importance of my makeStyles classes over default Material UI styles? Here is my code: import { createTheme, ThemeProvider } from '@mui/material/styles'; import { makeStyles, createStyles } from '@mui/styles'; co ...

I encountered an issue when sending a PATCH request via Hoppscotch where the request body content was returned as 'undefined', although the username and ID were successfully

const express = require("express"); const app = express(); const path = require("path"); let port = 8080; const { v4: uuidv4 } = require('uuid'); app.use(express.urlencoded({extended: true})); app.set("views engine", ...