Question

我正在尝试编写一个指令来包装Selectize jQuery插件。我有它主要功能，但我需要处理required和maxlength的验证。我正在尝试使用ng-required和ng-maxlength指令，但无法工作。我也无法使HTML maxlength属性起作用。我是否应该能够在我的指令之上使用内置的Angular指令，还是我需要自己检查并设置有效性？

这是我的指令代码：

.directive('selectize', function() {
    return {
        restrict: "A",
        require: 'ngModel',
        link: function( scope, element, attrs, ngModel ) {
            var options = scope.$eval(attrs.options);
            var formattedOptions = [];
            for (var i = 0; i < options.length; i++) {
                var option = options[i];
                formattedOptions.push( { 'value': option, 'label': option } );
            }

            element.selectize({
                options: formattedOptions,
                labelField: 'label',
                valueField: 'value',
                sortField: 'value',
                searchField: 'value',
                maxItems: 1,
                hideSelected: true,
                persist: false,
                render: {
                    option_create: function ( data, escape ) {
                        return '<div class="create">' + data.input + '</div>';
                    }
                }
            });

            element.on( 'change', function () {
                scope.$apply( function () {
                    ngModel.$setViewValue( element.val() );
                });
            });
        }
    };
})

和HTML：

<input selectize 
       options="field.options"
       ng-model="field.response"
       class="form-control"
       ng-required="field.required">
</input>

当我检查这个元素时，即使field.required的值为true，required也会设置为false。同样，当我尝试使用ng-maxlength时，它没有显示任何验证错误（ng-maxlength和验证错误HTML未显示）。使用HTML maxlength属性不会限制我尝试输入的字符数。

任何想法我做错了什么？我是指令的新手，所以如果还有其他最佳实践，我也可以随意指出这些指令。谢谢！

Answer 1

在NgModelController上阅读Angular文档并按照自定义控件示例后，我发现我没有在我的指令中正确使用ngModel。进行以下更改后，我可以使用ng-required和我的自定义指令。

1 - 我将require: ngModel更改为require: ?ngModel

2 - 我添加了以下内容来处理不保留存储在ngModel中的值的选择输入：

var selectize = element[0].selectize;
ngModel.$render = function() {
    selectize.setValue( ngModel.$viewValue );
}

3 - 要解决有关正在进行的摘要的错误，我在更改时修改了我的元素以使用$ timeout：

element.on( 'change', function () {
    $timeout( function() {
        ngModel.$setViewValue( element.val() );
    });
});

如何将AngularJS内置指令与自定义输入指令一起使用

1 个答案: