1

我有我在指令中创建的动态 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 'people' 来自一个承诺：

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

替换元素函数：

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 时，我无法弄清楚为什么验证不起作用（错误消息不会显示）？

4

1 回答 1

0

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

诀窍是首先将新创建的 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);

提琴手前后_ _

于 2014-09-28T04:45:18.280 回答