在 AngularJS 中检查自定义指令的输入

Question

我有一个非常大的表格，在编辑 HTML 时变得难以阅读和遵循。我决定尝试充分利用 AngularJS 并使用自定义指令来压缩重复文本的数量。这是我写的原始指令：

app.directive("formField", function () {
    return {
        restrict: 'E',
        scope: {
            fieldData: '=field',
            fieldName: '=name',
            fieldType: '=type'
        },
        template: <SOME HTML>
    }
});

我会使用此指令将表单字段添加到我的页面，如下所示：

<form-field field="some_data" type="text" name="other_data"></form-field>

我使用 type 变量来区分日期时间输入、文本输入、数字等，因为它们在我的代码中仅通过一个关键字（通过输入的 type 属性）进行区分。 )

但是现在我遇到了包含复选框的需要，由于我的布局，这需要截然不同的代码才能正确构建。基于此，当类型 "checkbox" 传递到指令中时，我想 return 一个不同的模板值。我试过这种东西的变体：

app.directive("formField", function () {
    return {
        restrict: 'E',
        scope: {
            fieldData: '=field',
            fieldName: '=name',
            fieldType: '=type'
        },
        template: function () {
            if(fieldType == 'checkbox') {
                return <CHECKBOX HTML>;
            } else {
                return <REGULAR FIELD HTML>;
        }
    }
});

这行不通。谁能告诉我如何检查类型字段的值，以便我可以在指令的 returned 对象中比较它？谢谢。

Answer 1

在模板中，您可以检查元素的属性。

您的模板应如下所示：

template: function (element, attrs) {
        if(attrs.type == 'checkbox') {
            return <CHECKBOX HTML>;
        } else {
            return <REGULAR FIELD HTML>;
        }
    }

fieldData、fieldName 和 fieldType 的隔离范围属性定义在模板 return 字符串中可用（使用表达式），但它们在模板的逻辑中不可用。例如：

template: '<p>{{ fieldData }}</p>'

在 AngularJS 中检查自定义指令的输入

Checking Input to a Custom Directive in AngularJS

javascript

angularjs

directive