Question

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

我写下面的实现似乎工作正常。我面临的挑战是使其具有可重用性和动态性。

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

我尝试使用链接和编译功能，但遗憾的是，这些功能均无效，因为它是异步执行的，而且我无法在模板中使用变量值未定义。

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

L2

HTML

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>'; 
   }
});

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

1 个答案: