Question

我正在尝试将Angular Bootstrap Calendar集成到我的Laravel 5项目中。现在，日历使用提供的预先填充的事件演示列表。

vm.events = [
  {
    title: 'An event',
    type: 'warning',
    startsAt: moment().startOf('week').subtract(2, 'days').add(8, 'hours').toDate(),
    endsAt: moment().startOf('week').add(1, 'week').add(9, 'hours').toDate(),
    draggable: true,
    resizable: true
  }, {
    title: 'Event 2',
    type: 'info',
    startsAt: moment().subtract(1, 'day').toDate(),
    endsAt: moment().add(5, 'days').toDate(),
    draggable: true,
    resizable: true
  }, {
    title: 'This is a really long event title that occurs on every year',
    type: 'important',
    startsAt: moment().startOf('day').add(7, 'hours').toDate(),
    endsAt: moment().startOf('day').add(19, 'hours').toDate(),
    recursOn: 'year',
    draggable: true,
    resizable: true
  }
];

我想从我的数据库中检索和格式化事件，如上例所示，但我不确定如何从我的控制器中解决这个问题。

在Angular Calendar方面，我已经读过我可以使用angular $ http服务加载事件，如下所示：

$http.get('/events').success(function(events) {
    //TODO - format your array of events to match the format described in the docs
    $scope.events = events; //Once formatted correctly add them to the scope variable and the calendar will update
});

非常感谢任何帮助

Answer 1

您要做的是创建一个服务，负责处理所有HTTP请求/响应处理，让控制器使用它来获取/保存/更新数据。类似的东西：

// assuming that you have a REST service endpoint at /events


// create your service that will handle all HTTP interaction for the events resource
app.factory('EventsService', ['$http', function($http) {
    return {
        getAll: function() {
            // fetch all events asynchronously
            return $http.get('/events').success(function(response) {
                var events = response.data;

                // if you need to do any pre-processing of the events first, do it here

                // pass  your events to the next function in the promise chain.
                return events;
            }, function(err) {
                // handle errors here

                // pass your error object down the chain in case other error callbacks are added later on to the promise.
                return err;
            });
        }
    };
}]);

app.controller('YourController', ['$scope', 'EventsService', function($scope, EventsService) {
    // call the asynchronous service method and add  your promise success callback that returns your array of events to be bound to your context.
    EventsService.getAll().then(function(evts) {
        $scope.events = evts;
    }, function(err) {
        // do any additional error handling here
    });
});

返回格式化的事件数组

1 个答案: