angularJicker的angularJS自定义指令不起作用

时间:2015-09-24 00:47:02

标签: javascript angularjs angularjs-directive

所以我只使用element为我的timepicker设置了一个自定义指令。输入正在工作,我自定义的标签,但我使用的timepicker插件将无法正常工作。我使用此插件作为我的时间戳:http://timepicker.co/options/

这是我的HTML:

  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
};
});

我的自定义指令js:

context.globalCompositeOperation = blendMode;
if (context.globalCompositeOperation !== blendMode){
     // not supported mode
}

1 个答案:

答案 0 :(得分:0)

我认为您的链接器功能需要获取输入。不是基本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对象中。