使用方法FullCalendar与AngularUI包装 [英] Using FullCalendar methods with AngularUI wrapper

问题描述

我想AngularUI的日历包装融入我的应用程序，日历初始化工作正常。不过，我不明白我怎么能叫日历的方法从这里开始。这里是我的控制器code：

I'm trying to integrate AngularUI's calendar wrapper into my application, and the calendar initialization works fine. However, I don't see how I can call calendar methods from here. Here's my controller code:

$scope.events = [];
$scope.calendarOptions = {
    calendar: {
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultView: 'agendaWeek',
        selectable: true,
        selectHelper: true,
        select: function(start, end, allDay) {
            var title = prompt('Event Title:');
            if (title) {
                $scope.$apply(function(){
                    $scope.events.push({
                        title: title,
                        start: start,
                        end: end,
                        allDay: allDay
                    });
                });

            }
            // should call 'unselect' method here
        },
        editable: true
    }
};
$scope.eventSources = [$scope.events];

我如何调用从日历的方法呢？这不是在我的控制器的范围，我的范围对象中签到处。

How do I call methods from the calendar? It's not in my controller's scope, I've checked everywhere inside the scope object.

我发现这个uiCalendar指令code里面：

I found this inside the uiCalendar directive code:

 scope: {ngModel:'=',config:'='},

根据我的理解，这意味着日历在隔离范围内创建。因此，没有方法可以在日历上被调用。然而，在演示中，我发现这个行：

By my understanding, this means that the calendar is created in an isolated scope. So no methods can be called on the calendar. HOWEVER, in the demo I found this line:

 /* Change View */
$scope.changeView = function(view) {
    $scope.myCalendar.fullCalendar('changeView',view);
};

因此​​，演示可以调用日历的方法，我不能？我也不能复制此。

So the demo can call methods on the calendar and I can't? I can't replicate this either.

任何帮助理解或固定问题将是AP preciated。

Any help understanding or fixing the issue would be appreciated.

推荐答案

好了，所以它是pretty源$ C ​​$ C显而易见的，但我并没有在第一次看就懂。这里有一个相关的片段：

Okay, so it was pretty obvious in the source code, but I didn't understand on first glance. Here's a relevant snippet:

if(attrs.calendar){
    scope.calendar = scope.$parent[attrs.calendar] = elm.html('');
}else{
    scope.calendar = elm.html('');
}

这结合日历时，你写在你的HTML日历指令，声明名下父范围。例如。

This binds the calendar to the parent scope under the name that you declare when you write the calendar directive in your HTML. e.g.

<div ui-calendar="options" calendar="my-calendar-name" ng-model="events"></div>

这意味着我可以在日历上的在我的控制器的范围方法调用。这是一个功能的实现，我没有考虑呢！我们需要一些文档此脚本。

This means I can call on the calendar's methods in my controller's scope. It was a feature implementation that I hadn't even considered yet! We need some docs for this script.

这篇关于使用方法FullCalendar与AngularUI包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！