如何使用带有自定义输入指令的 AngularJS 内置指令答案

【问题标题】：How to use AngularJS built-in directives with custom input directive如何使用带有自定义输入指令的 AngularJS 内置指令
【发布时间】：2014-08-28 12:49:32
【问题描述】：

我正在尝试编写一个指令来包装 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 属性也不会限制我尝试输入的字符数。

任何想法我做错了什么？我是指令的新手，所以如果我缺少任何其他最佳实践，请随时指出这些。谢谢！

【问题讨论】：

可能与插件有关，而不是与您的代码有关。您可能需要在插件 API 事件中工作以进行验证

标签： angularjs angularjs-directive selectize.js

【解决方案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 - 为了解决关于摘要已经在进行中的错误，我修改了我的元素 on change 以使用 $timeout：

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

【讨论】：