在一个指令中生成HTML时，角度setValidity不起作用

我有一个动态html，我在一个指令中做出来，它包含一个带验证的输入元素。实施例的HTML产生具有错误消息：在一个指令中生成HTML时，角度setValidity不起作用

<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 '人' 是从承诺：

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？

来源

2014-09-27 bmw0128

为什么你需要使用动态HTML？用ng-repeat不能达到同样的效果吗？ – 2014-09-28 00:30:15

我也尝试过，并没有奏效。我希望将动态HTML代生成一个指令将工作。 – bmw0128 2014-09-28 00:39:40

我有类似的问题，有一天，这里发现的解决方案：

Form Validation and fields added with $compile

诀窍是新创建的HTML代码段，首先追加到DOM，然后编译。这样它就会传播到父表单。例如：

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

来源

2014-09-28 04:45:18

在一个指令中生成HTML时，角度setValidity不起作用

回答

相关问题