Javascript 角度：在元素指令上添加属性指令

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

例如，我有以下指令：

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" myValidation="validationOptions"></text-field>

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

有人能告诉我们，当允许在指令（此处为文本字段）上声明验证部分并在指令的输入上使用时，执行“带表示的自定义输入”指令的正确方法是什么吗

例如，有没有一种方式可以说“我的元素指令上的属性将被‘复制’到我的指令中？”

又名：

<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>

{{label | translate}}

还是我只是错过了什么

我希望避免使用转换来解决此问题，因为这将迫使表单模板如下所示：

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

你能试试这个吗


编写
validate
指令。这将有一个公开
addValidationFunction（fn）
和
getValidationFunction（）
方法的控制器

让
myValidation
指令要求
validate
控制器并调用
ctrl.addValidationFunction（myValidationImplementation）
其中
myValidationImplementation
是实现此特定指令的验证逻辑的函数

编写另一个指令，
validateInner
。这将需要来自其父级的
验证
控制器。本指令还需要
ngModel
控制器。如果找到
validate
控制器，则调用
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]
    }
    ...
}


在
文本字段的模板中
：

<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
指令称为
（注1）→ 仪表板箱）。如果您上面的代码不是输入错误，那么这就是为什么
似乎会擦除
myValidation
我产生幻觉的原因，一个替换：true不会擦除其他指令，camelCase问题就是它的全部。但你是对的，这是我最后不得不做的，谢谢
<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>