Tips for establishing two-way communication between services

Question

Tips for establishing two-way communication between services

I currently am working on a project that involves 2 different directives:

<div ng-controller="indexViewModel">
    <div class="row">
        <searchfilters></searchfilters>
    </div>
    <div class="row top-buffer">
        <searchfields></searchfields>
    </div>
</div>

Both of these directives have a specified templateUrl and call 2 separate services, each handling a list of items.

var SearchFiltersService= angular.module('SearchFiltersService', [])
.service('SearchFilters', function () {
    this.MyList = [];
    return this;
});

var SearchFieldsService= angular.module('SearchFieldsService', [])
.service('SearchFields', function () {
    this.MyList = [];
    return this;
});

As I face challenges like cyclical dependency issues, I'm realizing the need to rethink my approach. How can I effectively manage 2 templates, each associated with a service (managing a list of items), where changes made in one service are reflected in the other service (and vice versa)?

javascript angularjs

Answer 1

Answer №1

According to a helpful comment by Daniel Beck, one way to handle communication between two services that need to exchange data is to create a shared service. This shared service can manage adding items, with additional logic to customize how the lists are updated based on which child service the item is being inserted into.

var SearchSharedService= angular.module('SearchSharedService', ['SearchFiltersService', 'SearchFieldsService'])
.service('SearchShared', function (SearchFilters, SearchFields) {

    this.addFilter = function(filter) {
        //Implement custom logic for each child service
        SearchFilters.myList.push(filter);
        SearchFields.myList.push(filter);
    };

    this.addField = function(field) {
        //Implement custom logic for each child service
        SearchFilters.myList.push(field);
        SearchFields.myList.push(field);
    };
    return this;
});

var SearchFiltersService= angular.module('SearchFiltersService', [])
.service('SearchFilters', function () {
    this.myList = [];
    return this;
});

var SearchFieldsService= angular.module('SearchFieldsService', [])
.service('SearchFields', function () {
    this.myList = [];
    return this;
});

Note: The shared service must be included in your module

var app = angular.module('myApp', ['SearchSharedService']);

Answer 2

According to a helpful comment by Daniel Beck, one way to handle communication between two services that need to exchange data is to create a shared service. This shared service can manage adding items, with additional logic to customize how the lists are updated based on which child service the item is being inserted into.

var SearchSharedService= angular.module('SearchSharedService', ['SearchFiltersService', 'SearchFieldsService'])
.service('SearchShared', function (SearchFilters, SearchFields) {

    this.addFilter = function(filter) {
        //Implement custom logic for each child service
        SearchFilters.myList.push(filter);
        SearchFields.myList.push(filter);
    };

    this.addField = function(field) {
        //Implement custom logic for each child service
        SearchFilters.myList.push(field);
        SearchFields.myList.push(field);
    };
    return this;
});

var SearchFiltersService= angular.module('SearchFiltersService', [])
.service('SearchFilters', function () {
    this.myList = [];
    return this;
});

var SearchFieldsService= angular.module('SearchFieldsService', [])
.service('SearchFields', function () {
    this.myList = [];
    return this;
});

Note: The shared service must be included in your module

var app = angular.module('myApp', ['SearchSharedService']);

Tips for establishing two-way communication between services

Answer №1

Similar questions

Passing data from a Vue.js component to a router in index.js

What is the most effective way to obtain the maximum innerHeight in a browser that is not set to 100% size

Leveraging JavaScript Functionality with ASP.NET Identity Roles

Is there a way to seamlessly transition to a new scene or page in my project while still having the option to easily navigate back to the previous

The www file is only loaded by Node Inspector when the preload setting is turned off

Using external URLs with added tracking parameters in Ionic 2

Limiting the invocation of the listener method in f:ajax depending on the return value of onevent

Checking the conditional styling implemented with Material UI makeStyles: a step-by-step guide

Utilizing Node.js to insert data into separate MongoDB schemas

Is there a way to set the content to be hidden by default in Jquery?

Challenges arise when attempting to integrate the jquery plugin (jlembed) due to conflicts with namespaces

What is the reason for the lack of invocation of the next-auth jwt callback during page transitions?

Utilizing AJAX to submit a combination of text fields and files in an HTML form

Trouble connecting JavaScript to Node application for proper functionality

Utilizing objects from a JSON file within an HTML document

ICEPush: Sending data via notifications

"Showing Images in a Slider: A Step-by-Step Guide

How can I code a script to import JSON data into MongoDB database?

Testing with Angular's $httpBackend to ensure that a GET request is being made in unit testing

javascript making a button using an object