在一個指令中生成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不起作用

回答

相關問題