Question

我在指令中创建了动态html，它包含一个带验证的输入元素。使用错误消息生成示例HTML：

<input id="bob" class="personCheckbox" name="bob"
                   type="checkbox" value="bob"
                   ng-model="foobar"
                   validate-foo/>

<span style="color:red" ng-show="myForm.bob.$error.summary">Need Summary</span>

<input type="text" name="summary-bob" id="summary-bob"/>

制作HTML的指令页面中的标记：

<div name-check></div>

制作动态HTML的指令，我有一个手表b / c＆＃39;人物＆＃39;是来自承诺：

app.directive('nameCheck', function($compile){

  return {
    replace : true,
    restrict: 'A',
    scope: false,
    link: function($scope, $element, $attrs) {

        $scope.$watch('people', function(newValue, oldValue) {
            var personNames= [];
            for(var i=0; i< newValue.length; i++){
                personNames.push(newValue[i].drugName);
            }

            if(personNames.length > 0) {
                replaceElement($scope, $element, $compile, personNames.sort());
            }
        });
    }
}
});

replaceElement函数：

function replaceElement($scope, $element, $compile, peopleNames){

  var html=  "\<div class='row'>"
            + "\<div class='small-12 columns'>"
            + "\<label>People</label>";

  for(var i=0; i < peopleNames.length; i++){

    html += "\<div>";
    html += "<input id='" + peopleNames[i] + "' ";
    html += " class='drugCheckbox' name='" + peopleNames[i] + "' ";
    html += " type='checkbox' value='" + peopleNames[i] + "' ";
    html += " ng-model='" + peopleNames[i] + "' ";
    html += " validate-foo/>";
    html += peopleNames[i];

    html += "<span style='color:red' ";
    html += " ng-show='myForm." + peopleNames[i]
    html += ".\$error.summary'>Need Summary</span>";

    html += "<input type='text' ";
    html += " name='summary-" + peopleNames[i] +"' ";
    html += " id='summary-" + peopleNames[i] + "' ";
    html += "\</div>";

}
html += "\</div></div>";

var DOM = angular.element(html);

var $e =$compile(DOM)($scope);
$element.replaceWith($e);
}

执行验证的指令：

app.directive('validateFoo', function(){
   return{
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attr, ctrl) {

        ctrl.$parsers.unshift(function (viewValue) {
            var id= attr.id;
            if(viewValue) {
                var val= document.getElementById('summary-' + id).value;
                if(val.length == 0) {
                    ctrl.$setValidity("summary", false);

                }
                else {
                    ctrl.$setValidity("summary", true);
                    return viewValue;
                }
            }
        });
    }

}
});

生成的动态HTML在页面上显示应该如此，但验证不起作用。当我硬编码一些示例HTML，并使用验证器，它工作正常。当我从指令生成HTML时，我无法弄清楚为什么验证不起作用（错误信息不会显示）？

Answer 1

前几天我遇到了类似的问题，并在此处找到了解决方案：

Form Validation and fields added with $compile

诀窍是首先将新创建的HTML片段附加到DOM，然后进行编译。这样它将传播到父FORM。例如：

directive = '<div>'+directive+'</div>';
// Do Not compile the element NOT beeing part of the DOM
//$(element).append($compile(directive)(scope));

// Firstly include in the DOM, then compile
var result = $(directive).appendTo(element);
$compile(result)(scope);

小提琴手before和after

在指令中生成HTML时，Angular setValidity不起作用

1 个答案: