javascript - Angular : Adding Attribute directive on Element Directive

Question

对于我的项目，我目前正在开发自定义表单/输入指令。

例如，我有以下指令:

angular.module('myApp').directive("textField", function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl : "/common/tpl/form/text-field.html",
        scope : {
            label   : "@",
            model   : "="
        }
    };
});

使用相关模板:

<div class="form-group">
    <label for="{{fieldId}}" class="col-lg-2 control-label">{{label |translate}}</label>
    <div class="col-lg-10">
        <input type="text" class="form-control" id="{{fieldId}}" ng-model="model" placeholder="{{label|translate}}">
    </div>
</div>

我有更多的自定义字段(日期、选择、双选等...)

用法很简单:

<text-field label="app.myLabel" model="myObj.myAttribute"></text-field>

这个想法是通过避免在每个字段上冗长地添加标签来清理主模板。我相信非常普遍的需求。

现在的问题:

现在我需要向我的输入模型添加自定义验证。

我做了一个天真的方法，即创建一个验证指令:

directive('myValidation', function (){
    return {
        require: 'ngModel',
        link: function(scope, elem, attr, ngModel) {
            ngModel.$parsers.unshift(function (value) {
                // do some validation
                return value;
            });
        }
    };
});

然后像这样使用它:

<text-field label="app.myLabel" model="myObj.myAttribute" myValidation="validationOptions"></text-field>

但是当然这不起作用，很简单，因为 replace=true 的文本字段指令“删除”了其元素上的验证指令。

有人可以告诉一个人执行“带有演示文稿的自定义输入”指令的正确方法是什么，同时允许在指令上声明验证部分(此处为 text-field )并在指令的输入上使用？

例如，有没有办法说“我的元素指令上的属性将被‘复制’到我的指令内部？”

又名:

<text-field label="app.myLabel" model="myObj.myAttribute" **myValidation="validationOptions"**></text-field>

会导致:

<div class="form-group">
        <label for="{{fieldId}}" class="col-lg-2 control-label">{{label |translate}}</label>
        <div class="col-lg-10">
            <input type="text" class="form-control" id="{{fieldId}}" ng-model="model" **myValidation="validationOptions"** placeholder="{{label|translate}}">
        </div>
    </div>

或者我只是错过了什么？

我想避免使用嵌入来解决这个问题，因为这会迫使表单模板看起来像这样:

<field label="myLabel">
     <input type="text" class="form-control" id="{{fieldId}}" ng-model="model" placeholder= {{label|translate}}">    
</field>

在我看来，这只是无用的冗长。但我开始问自己是否真的有另一种选择？

也许这个技巧可以在前(或后？)指令链接函数中完成，我会将属性/指令从文本字段标签复制到它的子(输入)标签？

有人可以在那里为我照亮道路吗？

Answer 1

你可以试试这个:

写个 validate指令。这将有一个 Controller 暴露 addValidationFunction(fn)和一个 getValidationFunction()方法。

有 myValidation指令要求 validate Controller 并调用 ctrl.addValidationFunction(myValidationImplementation)哪里myValidationImplementation是实现此特定指令的验证逻辑的函数。

编写另一个指令，validateInner .这将需要可选的 validate来自其父级的 Controller 。该指令还需要 ngModel Controller 。如果找到 validate Controller ，它调用 ctrl.getValidationFunction()并将函数注册到 ngModel即:

require: ["^?validate", "ngModel"],
link: function(scope,el,attrs,ctrls) {
    if( ctrls[0] != null ) {
        var validationFn = ctrls[0].getValidationFunction();
        // register validationFn with ngModel = ctrls[1]
    }
    ...
}

在您的模板中 textField :

<input validate-inner type="text" class="form-control" id="{{fieldId}}" ng-model="model" placeholder="{{label|translate}}">

用法:

<text-field label="app.myLabel" model="myObj.myAttribute"
    validate my-validation="validationOptions"></text-field>

注 1 : 我不确定是否是 replace:true指令删除其他指令。如果是这样，这不是一致的行为。

注释 2 : myValidation指令被称为 <xxx my-validation> (注意驼峰式→破折号)。如果你上面的代码没有错别字，那么这就是为什么 <text-field > 好像要擦 myValidation .