我正在尝试使用Angular指令嵌入一个时间线,该指令从php生成的JSON文件(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);
}
}
});
时间线不会加载PHP文件,即使它在没有插件的情况下加载,或者直接将其作为源(而不是"scope.results")输入时也能正常工作。我也可以毫无问题地加载普通的JSON文件,并且我生成的JSON能很好地验证。
我需要能够使用json.php文件。谢谢
查看注入$rootScope
服务是否有帮助。
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);
}
}
});
如果您将AngularJs与TimelineJs一起使用,那么我建议您使用Angular代码进行编码,而不是使用createStoryJS
。请看一下角度时间线js
事实上,@Mikey建议的选项也可以工作(只是你不需要postpone
,只需用$timeout
包装你的createStoryJS
,让DOM先渲染元素)