2

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

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

不仅是 datepicker 事件，还有任何 angular straps 事件。

我想做的一个例子：

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

4

2 回答 2

3

假设您想在控制器中获取选定的日期并对其进行处理：

将此添加到您的控制器：

$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
    ...
}

在你的控制器中，添加这个（你不需要 $watch 任何东西）：

$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 即可。

于 2014-07-07T15:31:56.387 回答
0

我检查了 AngularStrap 的日期选择器的代码。他们提供了一项$datepicker服务，我认为可以对其进行装饰以实现您想要的效果，但这应该在config您的应用程序阶段完成，并且该服务需要初始化一个 DOM 元素。因此，我认为这种解决方案是不可行的。

无论如何，我查看了Angular-UI 的 datepicker，它提供了属性来指定用于open和close事件的函数。使用它们并在那里发出你的事件会容易得多。

于 2014-05-12T09:09:18.860 回答