CODEWITHSUNDEEP
angularjsangularjs-directive
shayy
shayy

Reputation: 1312

Angular sidebar search directive

In my angular application I have a global sidebar navigation directive which among other things provides a global search for the user (with bunch of criteria, not just a text field).

Upon searching I'd like to show a page with the search results.

Now, the sidebar is defined in the main app html, what is the best way of sharing the search results data? Should the sidebar be in charge of performing the search? If so how do I share it's data to the specific page results? Or on the other hand, perhaps the specific search results page should be in charge of this data? If so how do I connect it with the sidebar search parameters when performing a search?

Any best practices of this scenario are appreciated.

Upvotes: 1

Views: 1214

Answers (2)

Appeiron
Appeiron

Reputation: 1061

Steps to make your future bright:

  1. Separate your search module in 3 modules: main, sidebar, results

  2. Translate data between each of them with one major SearchResultsService that will:

    a) acquire collection of sidebar filters with true or false for each key (key as name for GET param that will be used for passing to search API of your back-end);

    b) serialize or deserialize data depending on results module approach;

    c) do some pagination;

    d) hold or even cache data if you need (for infinite scroll functionality);

sidebar and results will be views of main (child modules), so you will be able to share main controller methods if needed (noob way)

When I was facing implementation of such module I've used black magic to escape $watch and $on event system. If you are young - then use $on that will allow you to notify each of modules about something important (such pagination change, item selection, etc.) and keep them separated same time.

You are free to place your existing sidebar in main module but I'd moved from directive to view with own controller and template.

Directives are used for reusable items either for pasting functionality. But dat sidebar obviously should be defined as separate part of app (aka module) but not as directive.

P.S. Keep your controllers simple. Google list:

Upvotes: 2

mat3e
mat3e

Reputation: 791

Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.

https://docs.angularjs.org/guide/services

Upvotes: 1

Related Questions