是否可以将“必需”传递给 AngularJS 指令？

Question

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

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 的 AngularJS 代码

Answer 2

Required 本身就是一个有趣的属性（参见此处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

我知道这是一个老问题，但对于其他前来寻找的人（这就是我最终来到这里的方式）：

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

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

然后在你的指令模板中你会使用它

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

要么找到属性 'required'，然后在指令中将其设置为 true，要么未找到将被 ng-required 解释为 false 值的属性