5

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

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

谢谢！

4

3 回答 3

4

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

这将允许您获取/设置模型值以及根据需要扩展或替换验证行为。因为您现在可能正在扩展 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 文档之外，这些文档对查看也很有用：

于 2013-10-15T21:39:41.577 回答
2

required本身就是一个有趣的属性（请参阅此处设置名为“required”的属性和任何值，使用 JQuery，都不起作用）。你可能会在传递任何类型的值时遇到很多麻烦，因为它的效果取决于它是否存在，而不是它的值。不同的浏览器会以不同的方式对待它，并且可能会重写该值。

您也会遇到麻烦，因为required和ngModel都是将在您的元素上编译的指令（如果提供的话）。如果您希望事情正常required进行ngModel，您将需要正确实施。ngModel

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

于 2013-10-15T00:28:04.450 回答
2

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

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

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

然后在您的指令模板中，您将其用作

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

要么找到属性“必需”，然后在指令中设置为 true，要么找不到属性，这将被 ng-required 解释为 false 值

于 2015-08-10T19:50:43.187 回答