Question

我正在使用角带datepicker，我想在datepicker打开和关闭时执行一些自己的逻辑。

如何在控制器中识别这些事件并绑定到它们？

而不仅仅是针对datepicker事件，而是任何角度带事件。

我想做的一个例子：

http://plnkr.co/edit/Uy1Lz6I0NWSACV4kyljk?p=catalogue

Answer 1

我们假设您想在控制器中获取所选日期并使用它执行某些操作：

将此添加到您的控制器：

$rootScope.$watch('datepickerDateSelected', function(date){
    // do whatever you want with the date parameter here
});

并修改datepicker指令 $ scope.select 方法，如下所示：

scope.$select = function (date) {
    $rootScope.datepickerDateSelected = date; // ADD THIS
    $datepicker.select(date);
};

[更新]

使用$ broadcast / $ on。修改指令（$ datepicker.show和$ datepicker.hide方法），如下所示：

$datepicker.show = function(){
    ...
    $rootScope.$broadcast('opening'); // ADD THIS
    ...
}

 $datepicker.hide= function(blur){
    ...
    $rootScope.$broadcast('closing'); // ADD THIS
    ...
}

在您的控制器中，添加此项（您不需要观看任何内容）：

$rootScope.$on('opening', function(event, data) { console.log("it's opening!"); });
$rootScope.$on('closing', function(event, data) { console.log("it's closing!"); });

它适用于我的情况，但您可能需要查看此内容：Working with $scope.$emit and $scope.$on（请参阅zbynour的回答）

如果您不想使用$ broadcast / $ on（请参阅评论），请改用第一个示例中的$ watch。

Answer 2

我检查了AngularStrap的datepicker代码。他们提供$datepicker服务，我认为可以根据您的需要进行修饰，但这应该在您的应用的config阶段完成，并且该服务需要初始化DOM元素。因此，我认为这种解决方案是不可行的。

无论如何，我查看了Angular-UI's datepicker，它提供了归因于指定用于open和close事件的函数。使用它们并在那里发布你的事件要容易得多。

当它们被触发时绑定到角带datepicker事件

2 个答案: