Question

我正在尝试将AngularUI的日历包装器集成到我的应用程序中，并且日历初始化工作正常。但是，我不知道如何从这里调用日历方法。这是我的控制器代码：

$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];

如何从日历中调用方法？它不在我的控制器范围内，我已经在范围对象内的任何地方进行了检查。

我在uiCalendar指令代码中找到了这个：

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

据我了解，这意味着日历是在一个独立的范围内创建的。因此，不能在日历上调用任何方法。但是，在演示中我发现了这一行：

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

所以演示可以在日历上调用方法而我不能？我也无法复制这个。

理解或解决问题的任何帮助都将不胜感激。

Answer 1

好的，所以在源代码中很明显，但我乍一看并不明白。这是一个相关的片段：

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

这会在您在HTML中编写calendar指令时声明的名称下将日历绑定到父作用域。 e.g。

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

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

在AngularUI包装器中使用FullCalendar方法

1 个答案: