0

I am in the progress of making an angularjs app with a c# web api.

I have controller A and B.

In controller A, i have a list of objects, when i click Add (between 2 list items), i get to controller B.

//add item
$location.path("/controllerB")

Inside controller B i am prestented with another list of objects, when i select, i need the selected item, to appear in Controller A's list, at the sepcified index.

My approach so far:

Localstorage: I use localStorage to store the selected object, so its accessible from Controller A, but then i also need the index, and if i store that in LS to access from Controller B, im headed down a path of bad decisions i feel :D

So my best guess so far:

1. Save index from controller A in local storage. (go to B)

2. Save selectedItem from controller B in local storage. (go to A)

3. Push selectedItem to Index.

So please, point me in the angular direction.

Kasper Sølvstrøm
  • 270
  • 1
  • 2
  • 22
  • what's the problem setting the list in the localStorage in Controller A and getting it in B ? it should work fine. Otherwise check events like `broadcast` and `on` – AshBringer May 09 '16 at 10:03

4 Answers4

1

Consider using an Angular Service to hold the data, Then Inject that service in your Controller A and Controller B.

Have a look at this topic:

What's the correct way to communicate between controllers in AngularJS?

Community
  • 1
  • 1
Nivo
  • 131
  • 1
  • 7
1

The best way to share objects between controllers is to use Services. You can make a shared data service and inject it across multiple controllers.

app.service('sharedData', function() {
    this.sharedData = ... //some data;
});

Using Services to Share Data Between Controllers

https://egghead.io/lessons/angularjs-sharing-data-between-controllers

Use local storage if you want to persist data across multiple browser session. For eg storing user favorites, cart items etc (in case these are not stored on the server).

Another thing, make a wrapper service for local storage as well. This service could be injected across different components and would be reusable.

https://gist.github.com/ShivrajRath/f19eb65a361a8c0aff89#file-ng-localstorageservice-js

A G
  • 21,087
  • 11
  • 87
  • 112
  • I know how to share data with a service, but i need a controller to return a selected object. Either you misunderstood or i mis-explained :) – Kasper Sølvstrøm May 09 '16 at 10:18
  • Then you need to persist that selected object in the service. On click of add you need to get the index, object and update the shared data service. – A G May 09 '16 at 10:21
0

There are numerous ways of passing data between controllers, which is appropriate to you will depend on the use case...

  1. You could store the data in storage (either in local storage, cookies, session storage, etc.) in 'Controller A' and then retrieve the data in 'Controller B' when it's loaded.

Advantages: - Highly adaptable storage of multiple sets of data, that can remain persistent between states/views, site and browser sessions.

Disadvantages: - Slower read/write times than that of URI loading or Angular 'service'. - Potentially high frequency of read/writes depending on data set, data more susceptible to hijacking from third-parties.

  1. You could pass the data via 'stateParams' if you're using ui-router to handle your states/views.

Advantages: - Human-readable link that allows for persistent data to be loaded. - Can be sent as a link to someone and data loaded remain coherent between users.

Disadvantages: - Logic can get messy pretty quickly if used for too many properties/data values. - May encounter encoding/decoding issues with regard to URI.

  1. You could use a 'service' provider as part of Angular, which may only have one instance (a singleton).

Advantages: - Read/write times are done in-memory so faster than that of local storage or session storage. - Depending on use-case can be easier to write unit tests for than local storage and/or session storage.

Disadvantages: - Data is not persisted between website or browser sessions.

Obviously as ever YMMV (Your Milage May Vary) with these and they're provided as a reference to determine which solution is appropriate to your use case.

tl;dr - Personally, I believe that (unless data must persist upon page reload) the Angular 'service' would be the best solution for your issue.

M-SIGMA
  • 1
  • 2
0

Solution: Don't.

Controller A - add item

Add empty dummy object

Controller B - select item

Save to localStorage

Back to controller A

Replace dummy with real object

Thanks for opening my mind, sometimes asking the question is enough :)

Kasper Sølvstrøm
  • 270
  • 1
  • 2
  • 22