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

Placing a moveable object in a designated spot for dropping at the desired location

I've been attempting to clone and drop a draggable object at the exact position within a droppable area where the drop event takes place. While I have come across examples online that demonstrate appending draggables to droppables, they all tend to re ...

javascriptjqueryhtmlcssjquery-ui

After using browserify, when attempting to call the function in the browser, an Uncaught ReferenceError occurs

I am currently in the process of creating a compact NPM package. Here is a basic prototype: function bar() { return 'bar'; } module.exports = bar; This package is meant to be compatible with web browsers as well. To achieve this, I have inst ...

javascriptnode.jsnpmbrowserify

Challenges arise when attempting to return an early resolution within promises in JavaScript

I have a function that determines further execution within itself and needs to use promises since it is asynchronous. An issue arises where the function continues execution even after resolving. Here's my code: function initializeApplication() { ...

javascriptjquerypromise

Locate the position of a substring within a Uint8Array

I'm working with a Uint8Array that contains the content of a PDF file. My goal is to locate a specific string within this array in order to insert additional content at that particular position. My current approach involves converting the Uint8Array ...

javascriptarraybufferuint8array

Photos failing to load in the image slider

Although it may seem intimidating, a large portion of the code is repetitive. Experiment by clicking on the red buttons. <body> <ul id="carousel" class="carousel"> <button id="moveSlideLeft" class="moveSlide moveSlideLeft"></button& ...

javascripthtmlcsscarousel

How can I take a screenshot from the client side and save it on the server side using PHP?

Currently, I am exploring the possibility of screen capturing at the client side. It appears that the "imagegrabscreen()" function can only capture screens on the server side. After some research, I discovered a new function that allows for screen capture ...

phpjavascripthtmlscreenshot

Guide on embedding PHP/MYSQL array into an independent JavaScript document

I'm looking for guidance on how to insert an array from a PHP MySQL page into a separate JavaScript file. Can someone please help me with indicating where to include the PHP URL and provide the correct format for the PHP array code in order to achieve ...

javascriptphparraysjson

The server mistakenly sent the resource as a Stylesheet even though it was interpreted differently

Dear Fellow Coders, Could anyone lend a hand? I encountered this issue on my website after uploading it to my FTP: "Resource interpreted as Stylesheet but transferred with MIME type text/plain" </head> <body> <div class= "navbar navbar ...

javascriptjqueryhtmlcss

Break up a line within an ionic element by inserting a linebreak tag

Currently, I am constructing an app using ionic framework and facing a challenge in inserting a linebreak within an ionic tag to ensure proper display inside the designated container... <h2>{{caravan.model}}</h2> ...

htmlcssangularjsionic-frameworktags

How to Use ngFor to Create a Link for the Last Item in an Array in Angular 7

I need help with adding a link to the last item in my menu items array. Currently, the menu items are generated from a component, but I'm unsure how to make the last item in the array a clickable link. ActionMenuItem.component.html <div *ngIf= ...

javascriptangulartypescriptangular7angular8

What is the importance of using a polyfill in Babel instead of automatically transpiling certain methods?

Recently, I have been diving into a course that delves into the use of babel in JavaScript. It was explained to me that babel, with the preset "env," is able to transpile newer versions of ES into ES5. However, I found myself facing a situation where the a ...

javascriptwebpackbabeljsecmascript-5

The white-spaces in Quill JS do not retain their original formatting

I recently integrated Quill JS editor into my website. During testing, I noticed that any text inputted after a white space gets emitted when alerting the content. Below is the HTML code snippet: <div id="postCommentEditor" class="postCo ...

javascripthtmlcssquill

Enhancing my code by implementing various conditions in React

Looking for ways to enhance my code quality (Very Important, Important, Medium, Low, Good, Excellent,...) : { Header: "Opinion", accessor: (row) => row.opinion, Cell: props => <span> {props.value == ...

javascriptreactjsreact-nativereact-hooks

Issue with React-Native Picker - managing item selection

Encountering an issue with the Picker picker component. There is an array of currencies as strings. Using the Picker to select items from this array, and have a function included in the onValueChange prop in Picker. The problem arises when trying to select ...

javascriptreact-nativestatepicker

javascriptDiscover the location of the central point within a polygon

I have stumbled upon a helpful resource that explains how to discover the central point of a polygon (and here in JavaScript): If you want to see a real-life example, check out this jsfiddle demo. Let's work with this specific polygon: var polygon ...

javascriptprototypecanvas

The compatibility issue between jQuery Tabs and Sliding effect

Hey there, I'm currently working on a website that requires a vertical tab system. I also have an arrow image that shows which tab or thumbnail the user has selected, and it should smoothly slide between the two thumbnails. You can check out the pro ...

javascriptjquerytabssliding

Retrieving JSON data value without a key using AngularJS

I am struggling to retrieve a data value from a JSON array in Angular that does not have a key value. While I have come across examples of extracting values with keys, I haven't been able to crack this particular piece. The JSON returned from the API ...

javascriptjsonangularjs

What is the best way to trigger a mongoose post hook from a separate JavaScript file or function?

I've been working with a location.model.js file that looks like this: 'use strict'; var mongoose = require('mongoose'), Schema = mongoose.Schema; var LocationsSchema = new Schema({ name: String, description: String, country_i ...

javascriptnode.jsexpressmongoosemean-stack

Encountering the error message "Cannot GET /" when trying to access the front page using Express.js

I am a beginner in Node.js. I have been learning through videos and documentation, and I started developing a site following an MVC structure. The node server appears to be working fine, but I am facing an issue where the front end displays 'Cannot GE ...

javascriptnode.jsexpress

I am looking to host several iterations of jQuery on a content delivery network within my Nuxt application

Currently, we are loading jQuery 3.1.4 externally from a CDN on the top page. index.vue head: { bodyAttrs: { id: 'overview' }, script: [ { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min ...

javascriptvue.jswebpacknuxt.js