I'm currently working on a project using AngularJS and TimelineJS3, but I've hit a roadblock.
In my application, I have a state called timeline, which has a partial view named timeline.html linked to a controller. This state initializes a promise to fetch data from the server, which will be stored in the $scope variable within the controller. The issue arises when I need to access this variable within a <script> tag in the partial view file.
Take a look at the code snippets below:
app.js
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
.state('timeline', {
url: '/timelines/:id',
views: {
'partial-timeline': {
templateUrl: 'partial/timeline.html',
controller: 'TimelineController'
}
},
resolve: {
getOneTimeline: ['$stateParams','timelineServ', function($stateParams, timelineServ) {
return timelineServ.getTimelineById($stateParams.id);
}]
}
});
}]);
app.controller('TimelineController', ['$scope', 'timelineServ',
function($scope, timelineServ) {
$scope.timelineData = timelineServ.indivTimeline;
}]);
timeline.html
{{timelineData}}
<div id="timeline-embed" style="width: 100%; height: 600px"></div>
<script type="text/javascript">
window.timeline = new TL.Timeline('timeline-embed', {{timelineData}});
</script>
Even though the expression {{timelineData}} displays the correct data outside the <script> tags, I encountered difficulties utilizing it within those tags.
Any suggestions on how to overcome this obstacle? I'm relatively new to AngularJS.
Appreciate any help. Best Regards!