Passing angular scope variable to javascript

Question

I have angular scope variable which is being used in ng-repeat as well. I want to create a chart starting from a date and ending at a certain date with the current day marker. I am using javascript loader.js for drawing the charts but since I need to draw multiple charts inside ng-repeat. My code looks like this:

$scope.items = [{"title1":"start_day: 01-01-2017", "end_day:15-02-2018"},
{"title2":"start_day: 05-10-2017", "end_day:10-01-2019"}];

and javascript code from google charts:

anychart.onDocumentReady(function () {
// create data tree on our data
var treeData = anychart.data.tree(getData());

// create resource gantt chart
var chart = anychart.ganttResource();

// set container id for the chart
chart.container('container');

// set data for the chart
chart.data(treeData);
// set start splitter position settings
chart.splitterPosition(150);

var now = (new Date()).getTime();
var sec = 1000;
var min = 60*sec;
var hour = 60*min;
var day = 24*hour;

// create linemarkers
var tl = chart.getTimeline();
tl.lineMarker(0).value("current");


// get chart data grid link to set column settings
var dataGrid = chart.dataGrid();

// initiate chart drawing
chart.draw();

// zoom chart to specified date
chart.fitAll();
});

function getData() {
var now = (new Date()).getTime();
var sec = 1000;
var min = 60*sec;
var hour = 60*min;
var day = 24*hour;

return [
{

"periods": [
{"id": "1_1", "start": now - 365*day, "end": now + 100*day }]
},


];
}

I want to pass the dates from angularjs scope variable to javascript code here which will replace the existing data of start and end, also I need to convert the dates difference. Thanks in advance! :)

Telman · Accepted Answer · 2018-03-12 15:25:15Z

1

I would recommend to use another JS object that stores common data for both angular and js.

var DATES = [{"title1":"start_day: 01-01-2017", "end_day:15-02-2018"},
{"title2":"start_day: 05-10-2017", "end_day:10-01-2019"}];

...
//in agular
$scope.items = DATES;

...
//in loader
function getData() {
  ...
  return DATES;
}

You can also store an angular $scope into a variable and then use it as a usual variable into JS code, var ctrl = $scope but I would recommend to go with the first option.

--

Regarding to dates difference. Try to use standard Date class. For example:

var deltaMS = new Date("02-15-2018") - new Date("01-01-2017");
var deltaDays = delta / 1000 / 60/ 60 / 24;
//410 days

edited Mar 12, 2018 at 15:25

answered Mar 12, 2018 at 15:16

Telman

1,5071 gold badge9 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Amit Tanwar Over a year ago

@telman-agababovan Thanks a lot man! But to store data in another JS variable, do I need to do an ajax call because I am getting that data from a SharePoint list?

Telman Over a year ago

I'm not familiar with SharePoint, but probably yes. Then it would be good to start your controller and chart after the loading, to have the data synchronized, or you need some event broadcasting mechanism.

Collectives™ on Stack Overflow

Passing angular scope variable to javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related