Guidance that utilizes the scope of a specific instance

I have successfully created a d3.js directive, but I am facing an issue when resizing the window. The values of my first directive seem to be taking on the values of my second directive. How can I separate the two in order to resize them correctly?

(both directives already have an isolate scope).

Check out the plunker for reference: http://plnkr.co/edit/1GdEeug8k8Op2PWXFTqo

The part where my console returns the same object is as follows: 

              $window.onresize = function() {
                console.log(scope);
          };

This is what I observe in my console.

javascriptangularjsd3.jsangularjs-directiveangularjs-scope

Answer №1

You have successfully configured everything, ensuring that each graph retains its own set of data even when resized.

The only oversight is that you are only logging the isolated scope of the second directive.

To rectify this, update the log to:

console.log(scope.$parent.data);
console.log(scope.$parent.data2);

By making this change, you will be able to access the data of each isolated scope by referencing the parent scope.

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

Having trouble verifying a user's password in Postman using "bcrypt.compareSync" with Angular and the MEAN stack

I'm currently working on implementing user authentication before adding a JWT token, and I've encountered an issue where the 'if' check is generating this error: node_modules\bcryptjs\dist\bcrypt.js:265 th ...

angularangularjsmongodbexpressbcrypt

What is the solution for the error message "this.filters is not a function" in Vue.js 2?

Here is the code for my component: <script> import _ from 'lodash' export default{ props:['search','category'], data(){ return{ price_min:'', ...

javascriptvue.jslaravel-5.3vuejs2vue-component

What is preventing obj from being iterable?

When I try to compile this code, an error appears stating that the object is not iterable. Why is this happening? My goal is to determine the number of users currently online. let users = { Alan: { age: 27, online: false }, Jeff: { age ...

javascriptobjectfor-loop

c# JavaScriptConverter - understanding the deserialization of custom properties

I'm facing an issue where I have a JSON serialized class that I am trying to deserialize into an object. For example: public class ContentItemViewModel { public string CssClass { get; set; } public MyCustomClass PropertyB { get; set; } } Th ...

c#javascriptjsonserialization

The video does not begin playing automatically after utilizing react-snap

I included a background video in my react app that auto-plays upon page load and functions perfectly. Here is the JSX code I used: <video autoPlay loop style={{ backgroundImage: `url(${topVideoImage})`, }} muted playsInl ...

javascriptreactjsvideoprerenderreact-snap

Include an extra hyperlink in the adaptive menu bar

I have successfully created a responsive Navigation bar. Now, I would like to add an "Account" link on the right side of the navigation. My initial thought was to insert a div into a ul element, but I realize that this may not be W3C compliant. <div c ...

javascriptjquerycssresponsive-designnavigation

What is a more streamlined approach to creating a series of methods and functions that alter a single variable consecutively?

My JavaScript project involves handling sub-arrays within a long data file that cannot be altered. The data, stored in a variable named data, is retrieved via a script tag with a specified URL property. I need to extract and modify specific sub-arrays from ...

javascriptarraysfunctionvariablesmethods

A type error was thrown: $.ajax function does not exist within another function

I encountered a persistent ajax error on the website. Error : Uncaught TypeError: $.ajax is not a function at Hei Here is my code for reference: Can anyone pinpoint where I may be going wrong? The suggested solutions from other sources have not resol ...

javascriptjqueryajax

JavaScript in Internet Explorer is showing an error message stating that it is unable to access the property '0' of an undefined or null

JavaScript Code function update() { var newAmt = 0; var newtable = document.getElementById("tbl"); for ( var i = 0; i < newtable.rows.length; i++) { innerTable = newtable.rows[i].cells[0].childNodes[0]; if ( (innerT ...

javascriptjquery

Node.js utilized for conducting anti-virus scans on server-bound files prior to uploading

Is there a way for me to scan files that are submitted as request payloads to check if they contain potential viruses? For example, if someone tries to upload a txt file with the EICAR virus signature, I want to be able to scan it and reject it if it is in ...

javascriptnode.jsamazon-s3npmsap-cloud-platform

Is there a way to prevent the window.status from appearing?

I currently have the following code snippet: <a class="button accessLink" id="loginLink" href="#" data-action="Login" data-dialog="access" data-disabled="false" data-entity="n/a" ...

javascriptjquerycsshtml

React - z-index issue persists

My React App with Autocomplete feature is almost complete, but I need some assistance to double-check my code. https://i.stack.imgur.com/dhmck.png In the code snippet below, I have added a search box with the className "autocomplete" style. The issue I a ...

javascripthtmlcssreactjs

Submitting a Form in Django with Angular

Hey there! I'm currently trying to submit data using angularjs in Django with reference to this post. Unfortunately, it's not working as expected for me. views.py def add(request, template_name="form.html"): if request.method == "POST": ...

angularjsdjangoforms

Clicking on a date in Vue.js Fullcalendar

My goal is to retrieve a date value from the onDateClick function of fullCalendar using vue.js and then pass this data to a prop that can be stored in my backend via Laravel. However, I am encountering various undefined errors no matter how I approach th ...

javascriptvue.jsfullcalendar

I could use some help understanding how to identify the parent file so I can elevate a state

I'm facing a challenge in lifting up a state so that I can utilize it across various pages. The confusion lies in determining where to reference the states, given the uncertainty regarding the parent location. Since this is my first attempt at designi ...

javascriptreactjsreact-nativereact-context

Postman is displaying [object object] as the return value, but the actual value is not

Currently, I am working on automating tasks using Postman One interesting aspect is the presence of a vehicles array in the body { "Vehicles":[ { "car":"{{car}}", "bike":"{{bike}}&quo ...

javascriptjsonpostmanpostman-collection-runnerpostman-pre-request-script

Obtain a filtering dropdown list directly from the database within Ag-grid

Currently in my interface, I am attempting to implement a filter for the FOLDER column. This filter is supposed to retrieve data from the database and present it in a dropdown checkbox within that column. The filtering should be based on the selected data. ...

javascriptangulartypescriptfilterag-grid

Moving an item to the top of an array in JavaScript/Vue.js: A simple guide

const a = [{ "iso2": "KH", "countryName": "Cambodia", "nationality": "Cambodian" }, { "iso2": "KI", "countryName": "Kiribati", "nationality": "I-Kiribati" }, { "iso2": "KM", "countryName": "Comoros", "nationality": "Como ...

javascriptvue.js

unable to retrieve element values using class names

I have created multiple h1 elements with the same class names listed below. <h1 class="h1">One</h1> <h1 class="h1">Two</h1> <h1 class="h1">Three</h1> <h1 class="h1">Four</h1> I have also added a button that ...

javascripthtml

How can I configure the Google Chrome script debugger to pause on exceptions?

Is there a way to automatically interrupt the program when an exception is encountered? ...

javascriptgoogle-chrome