1207

angular: watch for filtered value in directive

Question:

I'm trying to implement a directive that draws a chart based on given values. I want the pass the data for the plot from the template. I have a working solution, passing the data in ng-model, for which I can then add a $scope.watch statement. But that doesn't work with filtered data, and I don't need two-way binding.

Ideally, the html should look like:

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

The directive, I guess, should look like:

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 an angular way to achieve this?

Answer1:

What about saving the filtered list in a different variable in your controller? something like:

$scope.filteredList = $filter('yourFilter')($scope.list);

and in the HTML:

<chart ????="filteredList" />

You only need to make sure you update filteredList whenever list changes.

Answer2:

What about actually placing binding on the ???? variable:

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

You might also want to add 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(); } }); } };

Recommend

  • How to run .ear file in JBoss 6?
  • Adding a new element into the DOM with angularjs does not initiate it
  • Change attribute of custom directive
  • Angular page doesn't refresh after data is added or removed
  • HighCharts - Show tooltip on column where value is 0 or null
  • Not able to display correct data in table -AngularJS
  • .NET video play library which allows to change the playback rate?
  • Using $compile in a directive triggers AngularJS infinite digest error
  • Updating Dojo provide
  • How to 'create temp table as select' in Slick?
  • Function calls are not supported. Consider replacing the function or lambda with a reference to an e
  • MySQL Order by column = x, column asc?
  • Is it possible to access block's scope in method?
  • Meteor helpers not available in Angular template
  • Weird JavaScript statement, what does it mean?
  • R: gsub and capture
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • bootstrap to use multiple ng-app
  • Comma separated Values
  • How to get icons for entities from eclipse?
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • Angular 2 constructor injection vs direct access
  • Java static initializers and reflection
  • Android Google Maps API OnLocationChanged only called once
  • Turn off referential integrity in Derby? is it possible?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Add sale price programmatically to product variations
  • MATLAB: Piecewise function in curve fitting toolbox using fittype
  • JaxB to read class hierarchy
  • costura.fody for a dll that references another dll
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How can I use `wmic` in a Windows PE script?
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • java string with new operator and a literal
  • How to load view controller without button in storyboard?
  • How do I use LINQ to get all the Items that have a particular SubItem?