用于时间选择器的angularJS自定义指令不起作用

Question

所以我只使用element为我的时间选择器提供了一个自定义指令。 输入有效，我自定义的标签也起作用，但是我使用的timepicker插件不起作用。 我正在为时间选择器使用此插件： http ://timepicker.co/options/。

这是我的html：

  <apple-timepicker label="Time Picker: " a-id="time" ng-model="fieldTime" ></apple-timepicker>{-fieldTime-}

和我的自定义指令js：

  apple.directive('appleTimepicker', function(){
var linker = function (scope, element, attrs, ngModel) {
    $(element).timepicker({
        timeFormat: 'h:mm p',
        interval: 15, // 15 minutes
        change: function(time) {
            scope.$apply(function() {
                // the input field
                var element = $(this), text;
                // get access to this TimePicker instance
                var timepicker = element.timepicker();
                text = timepicker.format(time);
                ngModel.$setViewValue(text);
            });
        }
    });
};
return {
    restrict: 'E',
    require: 'ngModel',
    template: '<label for="inputTimepicker">{-fieldLabel-}</label>'+
                '<div>'+
                    '<input type="text" id={-fieldId-} ng-model="fieldTime" readonly="true"/>'+
                '</div>',
    scope: {
        fieldLabel: '@label',
        fieldId: '@aId',
        fieldTime: '=ngModel'
    },
    controller: ['$scope',function($scope) {

    }],
    link: linker
};
});

Answer 1

我认为您的链接器功能需要获取输入。 不是基本的div元素：

element.find('input').timepicker({
        timeFormat: 'h:mm p',
        interval: 15, // 15 minutes
        change: function (time) {
            scope.$apply(function () {
                // the input field
                var element = $(this);//, text;
                // get access to this TimePicker instance
                var timepicker = element.timepicker();
                var text = timepicker.format(time);
                ngModel.$setViewValue(text);
            });
        }
    });

另外，没有理由将元素包装在jquery对象中。 它已经包装在一个jQuery lite对象中。