Eric Liprandi Eric Liprandi - 3 months ago 43
AngularJS Question

how do I get the calendar object with AngularJS ui-calendar using the "controller as" syntax?

I am using ui-calendar from angular-ui. It's very nice and easy to use.

However, I am unable to get a hold of calendar object to call

fullCalendar()
and execute certain functions on the calendar.

The documentation only gives examples using the
$scope
approach, but I am using the
controller as vm
approach recommended by John Papa and others. I have tried using it this way:


<div data-ng-controller="races as vm">
<div ui-calendar="vm.calendarConfig" calendar="vm.calendar"></div>
</div>


in the races controller I have the following:


vm = this;
vm.calendarConfig = { header: {...} };
vm.calendar = {};

// somewhere else in a separate click event
vm.calendar.fullCalendar('prev'); // ---> exception


That last line throws an exception
Object has no method 'fullCalendar'
.

Just wondering what I am missing and if anyone had an example of using
ui-calendar
with a
controller as vm
syntax.

Here is the plunker: http://plnkr.co/edit/DPo9meJHx19bREYFLhDh

Answer

Thanks Josh Kurz for your help. Here is what I ended up doing: I used a hybrid of the $scope and controller as approach. Basically, I added a dependency on $scope to my controller. When I need access to the actual calendar control, I use $scope.calendar.fullCalendar('...'). The plunker has been updated, but here is core of it in the script file:

angular.module('app').controller(controllerId, ['$scope', races];
function races($scope) {
    var vm = this;
    ...
    function next() {
        $scope.calendar.fullCalendar('next');
    }
}

and in the html:

...
<div ui-calendar ng-model="vm.eventSources" calendar="calendar"></div>
...

Not as clean as I would like it, but it still seems clean enough for my purpose.