When using Angular with multiple instances of the same directive, the scope is shared and not isolated

Can anyone help me with an issue I'm having while creating multiple directives with isolated scope? Whenever I make a change in the 1st directive, it also affects all other directives. It's causing some unexpected behavior.

For those who want to take a look at my problem, here is a working example: http://plnkr.co/edit/drBghqHHx2qz20fT91mi?p=preview. Feel free to add more of Type1 'Available notifications' and notice how changes in one reflect in all others of Type1 as well.

I have come across some solutions for similar issues online but they haven't worked for me so far. I did find a workaround by mapping 'subscription' data to local scope variables in the directive (app.js, line 76), but I believe there should be a better, more general way to solve this problem. Any suggestions?

javascriptangularjsangularjs-directive

Answer №1

When looking at your 'notificationitem' directive, take note of the following code snippet:

// if all variables are mapped in this way than works
//$scope.enabled = $scope.subscription.enabled;

The reason why all of the individual scopes are updating is because of the scope declaration within the same directive (notificationitem):

scope: {
      subscription: '=',
      index: '@'
    },

The use of the equal sign on subscription indicates that whenever the current scope updates, it should also update the parent scope. This results in changes to all isolated scopes being reflected in the parent scope as well. Since these isolated scopes are bound to the parent, any changes made will affect them.

If you want the subscription value to serve as the default for the text field, you can achieve this by following the logic of your commented-out code:

scope.value = scope.subscription.value;

By doing this, an isolated value is created within the isolated scope. Any changes to scope.value will not impact scope.subscription.value. Each text field now has its own 'value' property to monitor independently.

For more information on directive bindings, check out this helpful article:

Alternatively, you could inject your service into the directive to obtain the default value if the above solution doesn't suit your preferences. Hopefully, this clarifies things for 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

Sending back an HTTP response code from PHP to AJAX

I'm currently working on creating a login page for a website. The functionality involves using AJAX to send a request to a PHP script that verifies the username and password input. If the query returns a successful result, I use http_response_code(200 ...

javascriptphpajax

Steps to dynamically populate dropdown menus based on the selected options from other dropdown menus

I am working on a project that involves two dropdown menus. The options for the first dropdown menu are stored in a file called constant.ts. Depending on the selection made in the first dropdown, the options for the second dropdown will change accordingly. ...

javascriptangulartypescriptdropdown

Delete auto-generated list using handlebars JS

I have successfully created a dynamic list using Handlebars.js and its template. However, I am now facing confusion on how to remove or delete items from the list using a function or specific code. As I am new to Handlebars, I would appreciate any help. ...

javascriptjqueryhtml

Using JavaScript in Django templates: Displaying errors with a JavaScript function

Update: I recently made changes to my code, and it now looks like this: <script> function updateFunction(calibrationId) { document.getElementById(calibrationId).innerHTML = "<ul><li>" + calibrationId + "</li>" ...

javascriptdjango

Retrieving data from the <script> tag and transferring it to the t-esc tag within Odoo 12

After attempting to retrieve the current coordinates of a location in Odoo, I successfully obtained longitude and latitude data through an alert generated by the following code: <button onclick="getLocation()">Try It</button> ...

javascripttemplatesgeolocationodooodoo-12

Using ThreeJS to Load a Texture from an ArrayBuffer in JavaScript

If I have a JavaScript ArrayBuffer containing binary image data along with the image extension (such as jpg, png, etc), I want to create a ThreeJS Texture without the need for an HTTP request or file load as I already have the binary information. For exam ...

javascriptthree.jstextures

Tips for increasing the number of inputs within a form using <script> elements

I am currently working on a form within the script tags and I would like to include additional input fields before submitting. However, the submit button seems to be malfunctioning and I suspect that there may be an issue with how I am accessing it in my c ...

javascriptjqueryhtmlforms

What is the best way to display input fields only if the previous input has a valid value?

My challenge involves creating a form with 3 to 10 text input fields. Initially, the form will display only 3 inputs (minimum). I am looking for an efficient way to dynamically show additional input rows as each previous row is filled out with a valid val ...

javascriptjqueryformsloops

There seems to be an issue with the accurate calculation of the screen width while utilizing the scrollbar-gutter

Please take note: The scrollbar-gutter: stable; property is not compatible with Safari. Additionally, the issue seems to be specific to Chrome and works fine in Firefox. I have observed some unusual behavior when attempting to position elements fixed to t ...

javascripthtmlcss

Using Javascript to automatically submit a form when the enter key is pressed

Can anyone help me with a password form issue? I want the enter key to trigger the submit button but it's not working for me. I understand that the password can be viewed in the source code, this is just for practice purposes. <!DOCTYPE html> & ...

javascripthtmlcssenter

Various JSON Tag values occurring more than once

Upon receiving a JSON Object in HTML, I am passing it to a JavaScript function defined below. The issue arises when the same folderName appears repeatedly on the HTML page. JSON Object: { "folderName": "arjunram-test", "objects": [ { ...

javascripthtmljson

Adjusting the size of div content without changing its dimensions

I'm in search of a solution for resizing the contents within a fixed width and height div. Currently, my div looks like this: <div id="editor_preview" style="width:360px !important; color:gray; ...

javascriptjquerycsshtml

The Firebase Auth Multifactor feature does not include the multiFactor property in the user object

Looking to implement Multi-Factor Authentication (MFA) in my web app, but encountering an issue where the multiFactor property is missing in the code snippet below: import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.2/firebase-app.j ...

javascriptfirebasefirebase-authenticationmulti-factor-authentication

Sending documents to a printer directly from a Rails application

Is there a library or gem in Rails that can be used to print the contents of a web page directly onto paper? I am curious if it's possible to specify only a specific part of the page, such as a div, for printing. Any guidance, advice, or tutorial link ...

javascripthtmlruby-on-railsruby-on-rails-3

Headers have already been sent to the client and cannot be reset

Although I am relatively new to using nodeJs, I have conducted research to troubleshoot my issue. However, it appears that I am struggling a bit with asynchronous functionalities. I came across a solution that unfortunately did not work as expected. Here i ...

javascriptnode.jsarraysmongodbmongoose

Passing props in VueJS is a common task, especially while redirecting to another

I am working with two separate single-file components, each equipped with its own named route. In the Setup.vue component, there is a basic form that gathers and sends data to the Timer.vue component which expects certain props. Is there a way to navigate ...

javascriptvue.jsvuejs2vue-componentvue-router

Adjust the formatDate function in the Material UI datepicker

I recently implemented the material-ui datepicker component with redux form and it's been working great. However, I have encountered a minor issue. Whenever I change the date, it displays in the input field as yyyy-mm-dd format. I would like it to app ...

javascriptreactjsdatedatepickermaterial-ui

The margin data table unexpectedly grew on its own following the action of toggling column visibility

The margin table data mysteriously increased on its own after hiding / showing columns. Here is the original result before show/hide column: https://i.sstatic.net/N96HX.png After multiple show/hide actions (more than 10 times): https://i.sstatic.net/lPIG ...

javascriptjquerybootstrap-4datatabledatatables

Spinning cubemap texture in Three.js

I've created this cubetexture in Three.js. Now, I want to rotate the cubeTexture itself by 180 degrees, not the camera. Is there a way to achieve this? Specifically, I aim to rotate the x axis of the cubeTexture to display the opposite side. It would ...

javascriptthree.jstexturesskybox

Delayed callback on blur

I am developing an AutoComplete feature in React that displays a list of suggested completions as the user types into a text box. When a suggestion is clicked, it should trigger a callback function, and the dropdown should disappear when the text box loses ...

javascriptreactjs