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

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 があるのに、検証が機能しない (エラー メッセージが表示されない) 理由がわかりません。

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 に答える