用于 ngMessages 的自定义包装器可重用指令以最小化 HTML：指令的动态名称

Question

尝试最小化编写 html 以通过包装到自定义指令并显示消息来显示 ngMessages 模块。

我写的下面的实现似乎工作正常。我的挑战是让它可重用和动态。

angular.module('app').directive('myNgMsg', function () {
    var tpls ='<div ng-messages="form.field1.$error" ng-if="form.field1.$touched" style="color:red;font-weight: bold;" role="alert">'+ 
        '<div ng-message="required" class="error-message">Required Field</div>'+
        '<div ng-message="pattern">Invalid Input</div>'+
        '<div ng-message="minlength" class="error-message" >minimum 5</div>'+
        '<div ng-message="maxlength" class="error-message" >Maximum 10</div></div>';
    return {
         restrict: 'E',
         replace: true,
         transclude: true,
         template: tpls
   }
});

HTML

<div class="form-group">
   <label  astr>request num</label>
        <input type="text"  name="field1"class="form-control" required  ng-minlength="5" ng-pattern="/^[-a-zA-Z0-9@\.+_]+$/" ng-model="ngObject.request.field1"/>
                            <my-ng-msg> </my-ng-msg>
</div>
<div class="form-group">
   <label  astr>name</label>
        <input type="text"  name="field2"class="form-control" required  ng-minlength="5" ng-pattern="/^[-a-zA-Z0-9@\.+_]+$/" ng-model="ngObject.request.field2"/>
                            <my-ng-msg> </my-ng-msg>
</div>
<div class="form-group">
   <label  astr>home</label>
        <input type="text"  name="field3"class="form-control" required  ng-minlength="5" ng-pattern="/^[-a-zA-Z0-9@\.+_]+$/" ng-model="ngObject.request.field3"/>
                            <my-ng-msg> </my-ng-msg>
</div>

所以可以有很多字段具有相似的验证，但名称会不同，你能帮我如何动态发送名称并将其附加到我的指令中，以便我的自定义指令采用名称并处理该名称特定元素。

form.field1.$error 应该将字段名称作为字段名称 fieldname1,fieldname2 。

一旦我有办法做到这一点，我就可以动态更改我的 HTML，它位于变量 tpls

任何指示或帮助。

Answer 1

我尝试使用 Link 和 Compile 函数，但遗憾的是其中 none 起作用了，因为它是异步执行的，我无法在我的模板中使用未定义的变量值。

我从其他答案 here 得到了一个解决方案，只是为了完整地发布我是如何得到它的。

angular.module('app').directive('myNgMsg', function () {

    return {
         restrict: 'E',
         replace: true,
         transclude: true,
        template: function(element, attrs) {
             var ctrlname=attrs.name;
             var tpls ="form.'+ctrlname+'.$error" ng-if="form.'+ctrlname+'.$touched" style="color:red;font-weight: bold;" role="alert">'+ 
        '<div ng-message="required" class="error-message">Required Field</div>'+
        '<div ng-message="pattern">Invalid Input</div>'+
        '<div ng-message="minlength" class="error-message" >minimum 5</div>'+
        '<div ng-message="maxlength" class="error-message" >Maximum 10</div></div>'; 
   }
});

HTML

<div class="form-group">
   <label  astr>request num</label>
        <input type="text"  name="field1"class="form-control" required  ng-minlength="5" ng-pattern="/^[-a-zA-Z0-9@\.+_]+$/" ng-model="ngObject.request.field1"/>
                            <my-ng-msg> </my-ng-msg>
</div>

用于 ngMessages 的自定义包装器可重用指令以最小化 HTML：指令的动态名称

Custom wrapper reusable directive for ngMessages to minimize HTML : Dynamic name to directive

html

javascript

angularjs

ng-messages