Listen for the modified value in a directive with AngularJS

I am currently working on implementing a directive that can draw a chart based on specified values. What I am aiming for is to pass the data necessary for the plot directly from the template rather than using ng-model, as my current solution requires. I have found that using ng-model and $scope.watch works well, however, it does not support filtered data and I do not require two-way binding. Ideally, the html structure I am looking for is: 

<chart ???????="list | filter" />
The structure of the directive I envision is as follows: 
return {
    restrict: 'C',
    link: function(scope, elem, attrs) {
        var chart = null;

        scope.$watch(????, function(v) {
            if(!chart) {
                chart = $.plot(elem, v, options);
                elem.show();
            } else {
                chart.setData(v);
                chart.setupGrid(); 
                chart.draw();
            }
        });
    }
};
Is there a more angular-friendly way to accomplish this task?

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-filter

Answer №1

Have you thought about storing the modified list in a separate variable within your controller? For example:

$scope.filteredData = $filter('customFilter')($scope.data);

Then in your HTML:

<custom-chart data="filteredData" />

Just ensure you keep filteredData updated whenever data changes.

Answer №2

Have you considered adding binding to the ???? variable:

<chart ???????="{{list | filter}}" />

You may also wish to include in your directive:

  return{
    restrict: 'C',
    scope: {
        ????: "@",
    },
    link: function(scope, elem, attrs){
        var chart = null

        scope.$watch(????, function(v){
             if(!chart){
                chart = $.plot(elem, v , options);
                elem.show();
            }else{
                chart.setData(v);
                chart.setupGrid(); 
                chart.draw();
            }
        });
    }
};

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

What steps can I take to prevent encountering a Typescript Error (TS2345) within the StatePropertyAccessor of the Microsoft Bot Framework while setting a property?

During the process of constructing a bot in Typescript, I encountered TS2345 error with Typescript version 3.7.2. This error is causing issues when attempting to create properties dynamically, even if they are undefined, or referencing them in the statePro ...

javascripttypescriptbotframeworkstate

What methods and applications are available for utilizing the AbortController feature within Next.js?

My search application provides real-time suggestions as users type in the search box. I utilize 'fetch' to retrieve these suggestions from an API with each character input by the user. However, there is a challenge when users quickly complete the ...

javascriptnext.js

Issues with JQuery Radio button selection in Internet Explorer 6

Here is some code that I am working with: <input type="radio" name="HotelSearch_Measure" value="Miles"> <input type="radio" name="HotelSearch_Measure" value="KM"> While this code functions properly in IE9, Chrome, and Firefox, it does not wor ...

javascriptjqueryinternet-explorer-6

"Using conditional statements to check for specific value ranges and properly handling cases where the result is undefined

Currently, I am working on a function that prompts the user to input a number and then displays a calculated score after they click a button. The score is based on the value entered by the user. While constructing this feature, I have pondered whether IF ...

javascripthtml

Guide on how to submit x-editable input data in a Razor page

When the submit button is clicked, I would like the form to be sent using the post method. Thank you for your assistance. Here is the HTML code: <form method="post" class="form-horizontal editor-horizont ...

javascript.netasp.net-corerazor-pagesx-editable

Electron's start script leads to project failure

Despite extensively searching the internet for a solution, I have yet to find a definitive answer that actually works. My last resort was downloading the example from Electron's website and directly inserting the scripts into my project. However, whe ...

javascriptnode.jsnpmelectronatom-editor

How come the values keep appearing without any loops or subsequent calls being made to the PHP file?

Here is a demo example showcasing 'Server Sent Events(SSE)': Embed HTML code(index.html) : <!DOCTYPE html> <html> <body> <h1>Receiving server updates</h1> <div id="result"></div> <script> if(type ...

javascriptphpjsonhtmlserver-sent-events

Exploring the power of Nestjs EventEmitter Module in combination with Serverless functions through the implementation of Async

I am working on implementing an asynchronous worker using a serverless lambda function with the assistance of the nestjs EventEmitter module. The handler is being triggered when an event is emitted, but the function closes before the async/await call. I ...

javascriptnestjsserverless-frameworkeventemitter

Using Angular to iterate over JSON fields containing hyphens

<span ng-repeat="doc in docs"> <p>{{doc.posted-Time}}</p> Instead of the actual value from the JSON, all I am getting is a 0. Is there a method to avoid this issue with the '-'? In my normal practice, I would utilize doc[&a ...

angularjsangularjs-ng-repeat

Experiencing a missing handlebars helper error when utilizing a helper within partials in express-handlebars

I have set up custom helpers using express-handlebars like this: const { create } = require("express-handlebars"); // Configuring the handlebars engine const hbs = create({ helpers: require("./config/handlebars-helpers"), }); app.engi ...

javascriptnode.jsexpresshandlebars.jsexpress-handlebars

Modifying a single route among several nested routes with specific names

My template includes various named, nested views: Template 1: <body> <div ui-view></div> </body> Template 2: <header></header> <div ui-view="left"></div> <div ui-view="canva ...

javascriptangularjsangular-ui-routersingle-page-application

How to dynamically update ng-repeat values using AngularJS and PHP

I'm facing an issue in my code where I am using ng-repeat, but only the last value gets updated when I try to update "frais" of all values displayed by ng-repeat. Can someone please help me figure out how to update all values? file.html <ion-cont ...

phpangularjsionic-framework

The :first selector examines the parent's parent as a reference point, rather than the immediate

I am facing a challenge with shuffling large elements within my layout because of floating them and attempting to display them. Specifically, the elements with the class .gallery-large always need to be the first child inside the .item container. There are ...

javascriptjqueryhtmlcss

The Meteor update is unsuccessful on the Mongo Sub Collection and will not continue

I am currently facing an issue with updating a specific object within an array in my object based on a value. Whenever I try to add the update code, the function gets stuck at that point without proceeding further. None of the console.log calls after the u ...

javascriptnode.jsmongodbmeteor

Struggling with linking my Angular Controller with my View and experiencing difficulty establishing a connection

I'm encountering an issue while attempting to link a controller to my view. The error I keep receiving is as follows: Error: ng:areq Bad Argument Argument 'TestAppCtrl' isn't a function, received undefined Here's the content ...

javascriptangularjsviewcontroller

Can someone explain why Array.from(classList)[0] is not changing to 'className'?

HTML Design <div class="custom-container color-red"> <h3>Hello, I am a customized container</h3> </div> Javascript Logic let element = document.getElementsByClassName('custom-container')[0]; let clas ...

javascriptarrays

"Provide information, then open a new webpage by clicking on a button. Perform various actions with the form by using type

Is there a way to quickly submit form entries to my database and then automatically redirect to a new page? My current situation requires that submitted information is stored in the DB before directing users to a thank you page, all in one seamless click! ...

javascriptphphtmlforms

Learn how to integrate ES6 features into your nodejs/expressjs application using either Gulp or Webpack

I am looking to incorporate ES6 features into my nodejs/expressjs application. Currently, I am using Gulp for JavaScript compilation and setting up live reload. What steps do I need to take in order to compile the es6 code to standard js within my exis ...

javascriptnode.jsgulpecmascript-6webpack

Transferring variables from the $(document).ready(function(){}) to the $(window).load(function(){} allows for seamless and

Just think about if I successfully create percent_pass at the time of document.ready, how can I transfer that variable to window.load? $(document).ready(function() { jQuery(function() { var ques_count = $('.question-body').length; va ...

javascriptjquery

Discovering modifications in a scope variable object with AngularJs

I found an interesting directive called angular-webspeech-directive Check out the HTML code below: <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>TestBed</title> <link da ...

angularjswebspeech-api