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

Experience the power of ReactJS as you utilize the componentDidMount lifecycle method to fetch data

Currently, I am in the process of learning how to utilize ReactJS, Spotify API, and Promises. My goal is to retrieve top albums from musicians on Spotify and play a 30-second snippet of their tracks. I have decided to work with a Spotify package known as ...

Tips for executing an artillery script with customizable parameters

execute my-script.yaml with artillery To access the target, a token is required for authentication. How can I execute the script above using a token? For example: execute my-script.yaml using token 983r2fh29hf2893yr72 ...

Show a Pair of Images Upon Submission Utilizing Ajax

Imagine having two separate div containers displayed as shown below: What I achieved was clicking the submit button would upload the image to the designated area. However, my goal is for a single click on the button to load the image in both containers. ...

Encountering a 'Object is not a function' issue while attempting to implement Page Object with Protractor

Whenever I attempt to run my tests, I keep encountering a TypeError: object is not a function. Prior to incorporating PageObject, everything worked fine. Below is my spec.js 'use strict'; var todoAppPage = require('../pages/angular.page&a ...

Exploring the use of single character alternation in regex with Webstorm's Javascript Regex functionality

I've been attempting to divide the string using two different separators, like so: "some-str_to_split".split(/-|_/) It successfully splits the string based on both "-" and "_". However, Webstorm is issuing a warning: Single character alternation ...

What is the process for sending a file to the server using JavaScript?

It seems like the process is not as simple as I originally thought. Here is the breakdown of what I am trying to achieve: I am capturing the FileList in my state like this... const [formValues, setFormValues] = useState({ image: null }) <input typ ...

Verify the MAC address as the user types

I need to verify a form field for MAC Addresses and have implemented the following code that does the job. $('body').on('keyup', '#macAddess', function(e){ var e = $(this).val(); var r = /([a-f0-9]{2})([a-f0-9]{2})/i, ...

Change from one value to another using a decaying sinusoidal wave

Can someone help me come up with a formula that will smoothly transition from a starting value to an end value over a specified time using a Sin or Cos wave? I'm attempting to replicate a bouncing effect like the one shown in my sample using CSS and ...

What is the best way to pass an array to a child component in React?

I am having an issue where only the first element of inputArrival and inputBurst is being sent to the child component Barchart.js, instead of all elements. My goal is for the data to be instantly reflected as it is entered into Entrytable.js. EntryTable.js ...

Executing PHP code from a list item

On one of my website pages, I have a list that functions as a delete button. However, I am interested in making it so that when a user clicks on the delete option, a php script is triggered - similar to how a submit button works. Below is the list structu ...

What are some of the potential drawbacks of utilizing the same template ref values repeatedly in Vue 3?

Is it problematic to have duplicate template ref values, such as ref="foo", for the same type but different instances of a component across views in a Vue 3 application? Let's consider the following example pseudocode: // ROUTE A <te ...

Addon for Firefox: Image Upload

I am looking for a way to streamline the process of uploading an image to a website through a Firefox Addon. While I know it is possible to use createElement('canvas'), convert Image data to base64, and XHR POST the data, I would prefer to lever ...

Angular Express: PUT request causes nested array object to be stripped

I have been facing an issue while trying to update my MongoDB database with data sent from the client side using Angular. The PUT request contains the required data as confirmed by intercepting it with Postman. {val1: 'Some Val', val2:[{v21: &ap ...

Is it the same item in one situation, but a completely different item in another?

I am currently investigating the behavior of objects in JavaScript, particularly when it comes to copying one object onto another. It seems that sometimes they behave as if they are the same object, where modifying one also modifies the other. Many resourc ...

Calculate the total number of rows in my table and display it in the console using AngularJS

Currently, I am working on a web application that includes a table and a checkbox. When the checkbox is checked, I want to display the total number of rows in the table. Here's an example layout: <table> <thead> <tr> <td& ...

Accessing data from localhost using Vue.js and Axios is restricted due to CORS policy and the error "Access to XMLHttpRequest" may be

Having a minor issue... Trying to retrieve a basic json file from my server for testing purposes (not an actual API). Utilizing VueJS and axios. Here is my code : getServicesAPI() { axios.get("http://51.91..../dist/API/Services.json").the ...

What is the best way to manage the connections in my D3 tree chart?

I've been working on customizing a tool from an open source library called angular-d3-tree, but I'm struggling with getting the links to connect properly in my D3 tree structure. This is what my current tree layout looks like: https://i.stack.im ...

Slow CSS :hover animations in the most recent release of Chrome

I recently upgraded my browser from chromium version 67 to the latest Chrome version 79. However, I noticed that after the upgrade, the CSS transitions on my website have become very laggy and unresponsive. Surprisingly, everything works perfectly fine on ...

[Angular] Why do we assign the name "vm" to two controllerAs references simultaneously?

I am trying to comprehend the functionality of the code below. There are two directives, namely "widget" and "filter" (we can consider them siblings). When I assign the controllerAs reference as "vm" to both directives, it does not work. This means tha ...

What is the most effective method for enlarging elements using Javascript?

I have come across many different methods for expanding elements on webpages, such as using divs with javascript and jquery. I am curious to know what the most optimal and user-friendly approach is in terms of performance, among other things. For instance ...