将表盘时间选择器转换为Angular JS

Question

由于angularjs中没有用于时间选择器的好插件（出于某种原因不喜欢angularUI引导时间选择器），我在寻找一种将现有的jquery表盘接口插件转换为angularjs的方法。

尝试自己进行转换，但是没有用。 选择时间后，模型不会更新。

.directive('clockface_1', function () {
                return {
                    restrict: 'A',

                    link: function (scope, element, attrs, ngModelCtrl) {
                        $(function () {
                            $('.clockface_1').clockface();
                        });
                    }
                }
            });

HTML：

<input type="text"  data-format="HH:mm"
                               class="form-control clockface_1" clockface_1=""/>

UPD ：通过学习一点angularJS指令，我得以实现它：以下对我有用：

.directive('clockface', function() {
            return {
                restrict: 'A',
                require : 'ngModel',
                link: function(scope, element, attrs, ngModelCtrl) {
                    element.clockface({
                        format: 'HH:mm'
                    }).on('pick.clockface', function(e, data) {
                        var hr=data.hour?("0" +data.hour).slice (-2):'00';
                        var mn=data.minute?("0" +data.minute).slice (-2):'00';
                        ngModelCtrl.$setViewValue(hr+':'+mn);
                        scope.$apply();
                    });
                }
            };
        });

HTML：

<input type="text"  data-format="HH:mm"
                               class="form-control clockface" clockface ng-model="to_time"/>

此解决方案唯一的问题是，时间选择器不会在输入模糊时隐藏。

如何隐藏模糊的表盘？ 另外，我遇​​到的另一个问题是，每当我将此插件附加到模态时，在模态打开后，我单击文本框，此后便出现了表盘。 如果我关闭模态，那么表盘仍然保持挂在身体元素上。

Answer 1

尚未测试，但请尝试以下操作：

.directive('ngClockface', function () {
                return {
                    restrict: 'A',
                    link: function (scope, element, attrs) {
                            $(element).clockface();
                        });
                    }
                }
            });