Currently, I am working on an angularJS application where I retrieve data from a REST service within the controller. The retrieved data is then passed to the view using $scope. However, I encountered an issue when trying to use this data in my in-page JavaScript. Despite attempting to simply use the variable name or {{variable_name}}, it did not work as expected. Any suggestions on how I can achieve this?
Below is a snippet of code from my controller:
$scope.requests = null;
var url = 'my_url';
$http.get(url).then(function(response)
{
$scope.requests = response.data;
if (response.data.status && response.data.message)
{
var status = response.data.status + '!';
var message = response.data.message;
showAlert(status,message);
}
return;
}).catch(function(response)
{
showAlert('danger!','Some error occured. Please try again.');
});
Furthermore, below is the in-page JavaScript code:
<script>
$(document).ready(function() {
/*
date store today date.
d store today date.
m store current month.
y store current year.
*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
/*
Initialize fullCalendar and store into variable.
Why in variable?
Because doing so we can use it inside other function.
In order to modify its option later.
*/
$('#calendar').fullCalendar({
// put your options and callbacks here
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
/*
selectable:true will enable user to select datetime slot
selectHelper will add helpers for selectable.
*/
selectable: false,
selectHelper: false,
/*
editable: true allow user to edit events.
*/
editable: false,
/*
eventStartEditable: false doesnt allow the dragging of events
*/
eventStartEditable: false,
/*
eventOverlap: false doesnot allow overlapping of events
*/
eventOverlap: false,
/*
events is the main option for calendar.
for demo we have added predefined events in json object.
*/
/* var events = requests.map(function(obj, index)
{
if (obj.accepted == 'no' ) return false;
return { id : obj.id, start : obj.start, end : obj.end }
})*/
});
});
</script>
<div id='calendar'></div>
The {{requests}} works for printing out the data, however, it cannot be used within the <script> </script> tags. I am specifically looking to utilize it within the script tags.