TimelineJS and AngularJS

I am trying to embed a timeline, using an Angular directive, which loads data from a php-generated JSON file (timeline.json.php).

var app = angular.module("timeline", []); app.controller('timelineCtrl', ['$scope', '$http', function ($scope, $http) { $http.get('timeline.json.php').success(function(data) { $scope.results = data; console.log($scope.results); }); }]); app.directive('timelineJs', function ($timeout) { return { restrict: 'A', link: function (scope, elem, attrs) { postpone = $timeout(function() { createStoryJS({ width: '100%', hash_bookmark: true, height: '600', source: scope.results, embed_id: 'my-timeline', css: 'http://cdn.knightlab.com/libs/timeline/latest/css/timeline.css', js: 'http://cdn.knightlab.com/libs/timeline/latest/js/timeline-min.js' }); }, 0); } } });

The timeline does not load the PHP file, even though it works when loading it without the plugin, or entering it directly as the Source (instead of 'scope.results'). I am also able to load a normal JSON file without issue, and my generated JSON validates perfectly.

I need to be able to use the json.php file. Thanks.

--------------Solutions-------------

See if it helps to inject $rootScope service.

app.directive('timelineJs', function ($timeout, $rootScope) {//inject $rootScope
return {
restrict: 'A',
link: function (scope, elem, attrs) {
postpone = $timeout(function() {
createStoryJS({
width: '100%',
hash_bookmark: true,
height: '600',
source: scope.results,
embed_id: 'my-timeline',
css: 'http://cdn.knightlab.com/libs/timeline/latest/css/timeline.css',
js: 'http://cdn.knightlab.com/libs/timeline/latest/js/timeline-min.js'
});
}, 0);
}
}
});

If you use AngularJs with TimelineJs, then I suggest you to go and code with Angular code, not using createStoryJS. Please take a look at angular-timelinejs

Actually the option that @Mikey suggested could work too (just you don't need that postpone, just wrap your createStoryJS with $timeout to let the DOM render elements first)

Category:javascript Time:2017-12-03 Views:2

Related post

  • xPages and AngularJS - namespace prefix in tags attributes causes errors in DDE 2012-02-24

    I would like to use AngularJS http://www.angularjs.org in my xPages app but I found a strange problem that syntaxt, that Angular is using, colides with xPages. Angular adds special tag attributes that are commands for angular engine/compiler. Typicly

  • EchoSign and AngularJS 2013-10-13

    Hey everyone! I want to connect to the REST API from an AngularJS website to fetch data like how many un-signed agreements does the user have, but I can't do it through Javascript, because I get this error : no 'access-control-allow-origin' header is

  • Reset file selection with single file upload with blueimp plugin and AngularJS 2013-10-14

    My settings are as following: singleFileUploads: false, // To limit the number of files uploaded with one XHR request, // set the following option to an integer greater than 0: limitMultiFileUploads: undefined, maxNumberOfFiles: 1, I am trying to all

  • using entity models in nodejs and angularjs 2014-03-05

    I'm building a node application with angular integrated. I have implemented a kind of entity class for my data models as follows; Student.js function Student(name, age,gender) { this.name = name; this.age = age; this.gender = gender; } Student.protot

  • How to use Kendo-zoomable view and AngularJS 2014-03-12

    I have an AngularJs mobile web application. I use this meta tag to give the application its mobile look and feel. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> But in

  • Node-Webkit and AngularJS package apps: require not defined 2014-05-09

    I am using https://github.com/mllrsohn/grunt-node-webkit-builder to package my node-webkit app which is built using AngularJS. The app works fine on MAC when I build from Sublime Text. But when I package the app using any packaging tool, I get the er

  • Integrating XForms and AngularJS 2014-12-29

    I was wondering if anyone here has any experience with integrating AngularJS and XForms. We are thinking about migrating to AngularJS from GWT and we have a workflow where we retrieve XForms from the server and use them to generate the search form wi

  • Issue with click function highcharts-ng and Angularjs 2015-01-19

    I set up a factory provider for my graph. The graph is built from highcharts and highcharts-ng which is an angularjs highcharts directive. Within my controller named SentimentChartController I then created a click function on my graph nodes as follow

  • ASP.NET MVC and AngularJS authorization 2015-03-17

    I am currently at the beginning process of starting a new application and am quite new to MVC and Angular. So far i have created a custom authorize attribute using asp.net MVC, this enables me to use the [Authorize] tag. Is it possible to use with an

  • Token module with slim framework api and angularjs 2017-03-03

    I have to implement authentication token in my application angularjs. I found 2 modules, ng-token-auth and Satellizer. In the part of back-end I have an API with slim framework. Why should I decide which module that works well with slim framework? --

  • Using angularjs and ASP.NET MVC 2013-07-09

    When using angularjs, I am serving up the home index page via ASP.NET MVC4. But I want this to be a SPA. For angularjs routing, does that mean I abandon partial server side views a la MVC and just work with html pages as my angularjs 'partial' views?

  • How does the communication between AngularJS and Play 2 works? 2017-02-28

    Within the scope of a lecture at uni, we are currently trying to develop a Web Application using the Play 2 framework for the backend, AngularJS for the client side and Bootstrap for the overall appearance. It is my first time using the Play and Angu

  • free and open source alternative to extjs 2008-10-14

    So what I'm looking for is a javascript framework I can use that has several UI controls. I have taken a look at jQuery but those controls are very basic compared to ExtJS. Are there any other competitive alternatives? This question exists because it

  • Which technology stack (modules, frameworks) is better for the first node.js project in order to study node and make a good product? 2012-03-09

    A year ago I made few small steps in node. Even then there was a great number of modules and frameworks. Now I want to learn the node environment more deeply and start a web based (service for web and mobile app) project. I understand that a lot of t

  • AngularJS not responding when pages is pulled in with ajax using jquery mobile, how to get angular to work with subsequent jqm pages? 2013-02-14

    Using jquery mobile and angularjs I am using the Single page template. In the first page angular is working as expected but in subsequent pages it is as if angular is not registered. When I change to using the Multi-page strategy its working. I have

  • what is the difference between provider and factory in angular js? 2013-03-27

    What are the differences between AngularJS module's Service, Provider and Factory? --------------Solutions------------- From the AngularJS mailing list I got an amazing thread that explains service vs factory vs provider and their injection usage. Co

  • AngularJs: ng-show / ng-hide expression not evaluated 2013-07-03

    I'm new to both javascript and AngularJS, and wondering why is the expression inside the quotes not evaluated? <span ng-show="{{remaining()}}!==0">sometext</span> it is simply printed like this: <span ng-show="2!==0">sometext</sp

  • Using of AngularJS with Lireray 2014-01-15

    I would use global AngularJS with Liferay Portal. Because, like the devise of AngularJS: Why AngularJS? HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets

  • AngularJS : $routeProvider isn't working 2014-03-19

    I'm new at javascript and angularJS and I have a little problem configuring my $routeProvider. It does not display anything at all. Here is my code : var route = angular.module('app', []); route.config(['$routeProvider', function($routeProvider) { $r

  • Compatibility with Phantomjs Angularjs 2014-07-28

    Friends. I have a small doubt regarding Phantomjs and Angularjs because I'm trying to do an Automated Test Using Phantomjs but has errors related to Jquery and Angularjs. Following following error: page.onError - msg: ReferenceError: Can't find varia

Copyright (C) pcaskme.com, All Rights Reserved.

processed in 1.134 (s). 13 q(s)