1

我有一個動態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?

+0

爲什麼你需要使用動態HTML?用ng-repeat不能達到同樣的效果嗎? – 2014-09-28 00:30:15

+0

我也嘗試過,並沒有奏效。我希望將動態HTML代生成一個指令將工作。 – bmw0128 2014-09-28 00:39:40

回答

0

我有類似的問題,有一天,這裏發現的解決方案:

訣竅是新創建的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); 

小提琴手beforeafter