如何使用“控制器作为”语法获得具有AngularJS ui日历的日历对象？

Question

我正在使用ui-calendar从角-用户界面.它很好，而且很容易使用。

但是，我无法获得日历对象来调用fullCalendar()并在日历上执行某些函数。

这些文档只给出了使用$scope方法的示例，但我使用的是John爸爸和其他人推荐的controller as vm方法。我试过这样做：

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

在比赛负责人中，我有以下几点：

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

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

最后一行抛出一个异常Object has no method 'fullCalendar'。

只是想知道我缺少了什么，如果有人有一个使用ui-calendar和controller as vm语法的例子。

下面是柱塞：http://plnkr.co/edit/DPo9meJHx19bREYFLhDh

Answer 1

谢谢Josh Kurz的帮助。下面是我最后所做的工作:我使用了$scope和controller as方法的混合体。基本上，我在控制器中添加了一个对$scope的依赖。当我需要访问实际的日历控件时，我使用$scope.calendar.fullCalendar('...')。柱塞器已经更新，但是下面是脚本文件中的核心：

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

在html中：

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

虽然没有我想要的那么干净，但对我来说还是足够干净的。

Answer 2

有趣的问题。

要用正确的语法实现这一点，我必须对uiCalendar进行黑客攻击。我在指令中添加了一个检查控制器-as属性的条件。http://plnkr.co/edit/6Jj0UHD7A8a1v8SRZrYP?p=preview

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


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

不是最漂亮的解决方案，但有效。也没有经过测试，所以你可以自行决定.

我认为，如果更多的人认为这是一个有效的公关日历，但这是我第一次听到这种类型的请求。

Answer 3

我在路由中使用了控制器，然后添加var vm = this之后，我的操作就开始工作了。