Is it possible to synchronize the same directive in Angular?

I am currently working on developing a social networking platform that includes an angular directive. This directive allows users to follow others by clicking on a button that appears next to their posts. The issue I am facing is that when I click on one follow button, the other buttons do not sync up and show the same result.

My main question is how can I synchronize all follow buttons?

This is how my code functions: A user's post displays with a like button at the bottom right corner. https://i.sstatic.net/N39xG.png

Upon clicking on the post, a modal pop-up window appears showing more details about the post, similar to clicking on an image in Facebook. https://i.sstatic.net/KOuHy.jpg

The problem arises when I attempt to vote (thumb up) in the modal pop-up, as it does not sync with the original thumb up button. https://i.sstatic.net/D36O8.jpg

Below is the code for voting:

VoteButtons.link = function (scope, ele, att) {
var post_id = att.voteButtons;
// Remaining code logic...
javascriptangularjsangularjs-directive

Answer №1

If you want to notify all other directive instances about a change, try using a pub/sub style. One way to do this is by broadcasting an event with $rootScope.$broadcast that includes the ID of the new item being followed.

All directives can then listen for this event and update the button state if they are linked to the item being followed. It may be a bit difficult to explain, but I hope you grasp the concept of my approach.

I hope this explanation proves helpful to you!

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

Error: The function modal() is undefined in the jQuery library

I am trying to open a modal on page load, but I encountered the following error: jquery.min.js:2 Uncaught TypeError: $(...).modal is not a function at HTMLDocument.<anonymous> ((index):491) at j (jquery.min.js:2) at k (jquery.min.js:2) Below is th ...

javascripthtmljquerybootstrap-4

Identify and remove numbers from an array that have the same digit, without having prior knowledge of which digit it

Is there an easy way to separate values in an array of random numbers between 0-99 based on their first and second digits? I need two arrays: one for values that share the same first digit, and another for values that share the same second digit. The actua ...

javascriptarrays

Convert the string to a time format of hours and minutes (hh:mm)

I am currently working with an input field that requires a time value to be entered. The format for the Time field is in hh:mm on the 24-hour clock format, such as 7:30, 11:45, 16:10, 19:11, or 22:43. <input id="szReminderTime" type="text" value="" max ...

javascripthtmlvalidation

Having difficulty adding multiple items to the state array

I am currently working on a parent component that iterates over an array and passes props to a child component. In the child component (shown below), I have checkboxes with Font Awesome icons for users to mark their selections. When a user checks a box, I ...

javascriptreactjs

What is the best way to implement a custom layout with nuxt-property-decorator?

Summary of Different Header Components in Nuxt In order to set a different header component for a specific page in Nuxt, you can create separate layout files. layout ├ default.vue // <- common header └ custom.vue // <- special header for s ...

javascripttypescriptvue.jsvuejs2nuxt.js

Utilizing a cucumber step definition in a one-page Angular application

I am working on automating tests for a single-page web application built with angular js using watir-webdriver and the page-object gem. The website features a multi-stage registration process where users fill in details on each page before clicking a &apo ...

rubyangularjscucumberwatirpage-object-gem

React function causing website to freeze upon dispatch

I created a function in the child component to handle checkbox selection and trigger setDispatch(true). Unfortunately, whenever I check the checkbox, the website freezes and stops responding until I close and reopen it. Here is the function: const [ ...

javascriptreactjsreact-hooksnext.js

Having trouble getting gulp set up and running with npm?

I am currently in the process of setting up gulp using npm in order to execute my project. Based on my understanding, all I need to do is enter "npm install gulp" in the command line at the location of my project like this : https://i.stack.imgur.com/hPU ...

javascriptnode.jsnpmgulp

Use regular expressions to locate all closing HTML tags and all opening HTML tags individually

My JavaScript function is currently filtering strings by removing all HTML tags. However, I have now realized that I need to perform two separate operations: first, replacing all closing tags with <br>, and then removing all opening tags. return Str ...

javascriptregex

What is the best method for managing a JSON javascript post when encountering a 500 error?

When it comes to writing a JSON block, there are various methods one can use. Personally, I prefer the following approach: $.post('/controller', { variable : variable }, function(data){ if(data.status == '304') { // No chan ...

javascriptjsonajax

Activate Jquery to display the submenu when clicked and conceal any other open submenus at the same time

I'm trying to create a responsive menu with menus and submenus using JQuery. However, as a newbie to JQuery, I'm struggling to hide a previous submenu when displaying another one. Here's the CodePen link Below is the HTML code: <nav cl ...

javascriptjqueryhtmlcss

Multer - uploading multiple files with unique paths and filters based on field names

Currently, I am facing an issue with a form that POSTs FormData to an express endpoint while using multer. The request can contain two fields: screenshot and staticFile, but they are not mandatory. The screenshot field expects a JPG file under 2mb in size ...

javascriptnode.jsexpressmulter

What could be causing Node to display this error message to me?

Hey there! I've been working on creating my very first Twitter bot, but whenever I try to run npm run dev, I encounter this error message: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8fcdfcdcddccddae89986988698"& ...

javascriptjsonnode.jsnpm

Ways to determine the types of props received by a function when the arguments vary for each scenario?

I have a specialized component that handles the majority of tasks for a specific operation. This component needs to invoke the onSubmit function received through props, depending on the type of the calling component. Below is an example code snippet show ...

javascriptreactjstypescript

conducting thorough analysis for detecting modifications akin to $watchCollection in Angular2

I have a situation where I am passing an array of objects from my parent component to child components. Even when a new item is added to the array or the property of an existing object changes, it fails to trigger the ngOnChanges for the affected component ...

angularjsangularangular2-observablesngonchangesangular2-docheck

Creating Typescript declarations for local JavaScript files

As part of our transition to Typescript at work, I've been working on adding typings to our Javascript files. However, I'm facing an issue with getting the declaration files recognized. Below is my file structure: js Foo.js typings Foo ...

javascripttypescriptdeclarationtype-declarationdeclaration-files

Nightwatch.js - Techniques for waiting until an AJAX request is finished

Currently, I am relying on nightwatchJS for browser automation. A common issue I encounter is that much of the content on my webpage gets updated via ajax calls. To ensure accurate testing, I need a way to pause my testing until the ajax call returns resul ...

javascriptselenium-webdriverautomationnightwatch.js

What is the best way to bind a Kendo grid following an update of the data in

//Using the HttpGet method from API to retrieve a list of data. var apiPath = "http://localhost/unitek/#/ParameterMaster"; Restangular.all(apiPath).getList().then ( f ...

javascriptangularjskendo-uikendo-grid

Checking TinyMCE to ensure it handles empty inputs properly

I find TinyMCE to be a highly effective WYSIWYG editor. The editor functions well, but I encounter an issue when trying to check if it is empty. Challenge I am in need of validating the content input in the TinyMCE textarea to ensure that something ha ...

javascriptjquerytinymce

Efficient Ways to pass information to an Object within a nested function

const http = require('https'); exports.ip = async (req, res) => { const ip = req.body.ip; const ip_list = ip.trim().split(' '); const count = ip_list.length; var execution_count = 0; var success = {}; // **Creati ...

javascriptnode.jsnpmhttps