Question

我正在制作一个自定义的自动完成指令，在其自身内部使用<input>，但我在确定如何传递'required'属性时遇到了一些麻烦，其他具有值的属性我可以看到，但“必需”似乎是空白的，无论它是否设置。我的回复声明的第一部分如下：

return {
            restrict: 'E',
            template: tpl,
            replace: true,
            scope: {
                suggestionsPath: '=autoComplete',
                method: '@method',
                term: '@term',
                required: '@required',
                ngModel: "="
            }...

谢谢！

Answer 1

我已经为输入构建了一些扩展，并且扩展现有ngModel绑定的最佳（可以说）唯一方法是在指令中使用ngModelController。您可以使用“require”属性来要求另一个指令的控制器。 documentation for ngModelController is here

这将允许您获取/设置模型值以及根据需要扩展或替换验证行为。因为您现在可能在组合AngularJS输入指令中进行扩展，所以您可能还需要查看AngularJS中的输入指令，以获取有关如何工作的示例。它们也可以与ngFormController一起作为整个表单的父级。这需要我一段时间才能掌握，所以请耐心等待，但这是迄今为止最好的方法。

我会在这里避免使用隔离范围，它们可能很棘手，并不总是与其他指令一起使用（所以通常只在新元素或只有一个指令存在的东西上使用它）。我会设计这样的东西：

return {
        restrict: 'E',
        template: tpl,
        replace: true,
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelController) {
           // Use attrs to access values for attributes you have set on the lement
           // Use ngModelController to access the model value and add validation, parsing and formatting
           // If you have an attribute that takes an expression you can use the attrs value along with $scope.$watch to check for changes and evaluate it or the $parse service if you just want to evaluate it.
        }

我建议尽可能熟悉指令设计，因为自定义输入可能会变得非常棘手，具体取决于它们的作用（我们已经构建了添加+/-按钮的自定义输入以及将数字格式化为百分比，货币或当你输入时用逗号分隔数字）。除了ngModelController文档，这些文档对于查看非常有用：

Egghead.io tutorials
input directives和forms

Answer 2

必需是一个有趣的属性（见Setting an attribute named "required" and any value, with JQuery, doesn't work）。你可能会在传递任何类型的价值时遇到很多麻烦，因为它的影响取决于它是否存在，而不是它的价值。不同的浏览器会以不同的方式对待它，并且可能会重写该值。

您也会遇到麻烦，因为required和ngModel都是指令，如果提供了这些指令，将在您的元素上编译。 required会与ngModel对话，如果您希望工作正常，则需要实施ngModel properly。

更简单的选项是将required和ngModel重命名为其他名称。例如myRequired和myNgModel。然后，您可以将ng-model直接绑定到scope.myNgModel，并将ng-required绑定到myRequired。

Answer 3

我知道这是一个老问题，但是对于那些来看的人（这就是我最终来到这里）：

您可以将所需的标记传递给指令以作为布尔值读取，然后在ng-required中使用该值。

return {
    restrict: 'E',
    template: tpl,
    replace: true,
    scope {
        required:'@'
    }

然后在你的指令模板中，你将它用作

<input type="text" ng-required="required" />

属性＆＃39;要求＆＃39;找到并在指令中设置为true，或者找不到将被ng-required解释为false值的属性

是否可以将'required'传递给AngularJS指令？

3 个答案: