我正在尝试将 FireBase 中的数据绑定(bind)到 Angular 中的 fullCalendar 插件。
但该插件似乎不喜欢 data.$asObject() 或 data.$as Array()。
这是我到目前为止不起作用的(没有显示 session ):
Controller :
(function () {
var app = angular.module("myCal");
app.controller('meetingsCtrl', meetingsCtrl);
function meetingsCtrl($scope, $http, $location, $firebase) {
var ref = new Firebase(firebaseurl); // real url
var meetings = $firebase(ref);
$scope.fireEvents = meetings.$asObject(); // $asArray() not working as well
} // controller func
})();
指令:
(function () {
var app = angular.module("myCal");
app.directive("sbCalendar", function () {
return {
link: function (scope, element, attrs) {
$(element).fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventLimit: true, // allow "more" link when too many events
aspectRatio: 4,
events: scope.fireEvents,
editable: true,
eventDrop: function (event, delta, revertFunc) {
} // event drop
}); // fullCalendar init & options
} // link
} // return
}); // directive
})();
我上传到 Firebase 的 json 文件(fb url 指向 session ):
{
"meetings": {
"x1": {
"title": "test subject",
"start": "2016-10-20",
"end": "2016-10-20",
"description": "some long description test"
},
"x2": {
"title": "test2 subject",
"start": "2016-11-05",
"end": "2016-11-06",
"description": "another long description for test 2"
},
"x3": {
"title": "test3 new subject",
"start": "2016-11-11",
"end": "2016-11-11",
"description": "yet another description for test 3"
}
}
}
最佳答案
(function () {
var app = angular.module("myCal");
app.controller('meetingsCtrl', meetingsCtrl);
function meetingsCtrl($scope, $http, $location, $firebaseArray) {
var ref = new Firebase(firebaseurl); // real url
$scope.fireEvents = $firebaseArray(ref);
}
})();
这是较新的语法 - 确保您使用最新的 Angular Fire 版本，在撰写本文时，Firebase 网站上有可用的 1.1.3 CDN。
在这里查看更多内容:
https://www.firebase.com/docs/web/libraries/angular/quickstart.html
app.directive("sbCalendar", function () {
return {
link: function (scope, element, attrs) {
scope.fireEvents.$loaded(function(){
$(element).fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventLimit: true, // allow "more" link when too many events
aspectRatio: 4,
events: scope.fireEvents,
editable: true,
eventDrop: function (event, delta, revertFunc) {
} // event drop
}); // fullCalendar init & options
})
} // link
} // return
}); // directive
关于javascript - 如何使用 Angular 将 firebase 数据绑定(bind)到 fullCalendar，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33836938/