12

フォームのバリデーションについて質問があります。次のシナリオでは機能しません。

グローバル フォームがあり、フォーム内で動的フィールドがディレクティブを使用してレンダリングされます。私のフィールドのタイプに基づくそのディレクティブは、最近コンパイルされたディレクティブを運命に追加します。

ここにディレクティブがあります：

app.directive('render', function($compile){
    return {
        scope: {model: '='},
        restrict: 'A',
        replace: true,
        template:
      '<div class="product-option-selector">'+
      '</div>',
    link: function(scope, element){
      var directive = null;

        switch(scope.model.type){
        case 'number':
          directive =
              '<div data-item-number data-model="model"></div>';
          break;
        case 'text':
          var directive =
              '<div data-item data-model="model"></div>';
          break;
        case 'radio':
          var directive =
              '<div fg-product-option-selector-radio option="option" item="item" index="index"></div>';
          break;
      }
      if(!directive) return;

      directive = '<div>'+directive+'</div>';
      $(element).append($compile(directive)(scope));
    }
    }
});

app.directive('item', function(){
    return {
        scope: {model: '='},
        restrict: 'A',
        replace: true,
        template: 
            '<ng-form name="innerForm">'+
            '{{model.name}}'+
             '<input type="text" name="innerVal" ng-model="model.value" required></input>'+
        '</ng-form>'
    }
});

app.directive('itemNumber', function(){
    return {
        scope: {model: '='},
        restrict: 'A',
        replace: true,
        template: 
            '<ng-form name="innerForm">'+
            '{{model.name}}'+
             '<input type="number" name="innerVal" ng-model="model.value" required></input>'+
        '</ng-form>'
    }
});

フォームが無効な場合に無効にする必要があるフォームにボタンがあります。問題は、ボタンが無効にならないことです。

HTMLコード：

<div ng-controller="basicController">
<form name="form">
    <div ng-repeat="f in fields">
        <div data-render data-model="f"></div>
    </div>
    <button ng-disabled="form.$invalid">submit</button>
</form>
</div>

私のjsFindleリンク: http://jsfiddle.net/8rz6U/1/

これは、アプリでの問題を単純化したものです。fields ディレクティブはより複雑ですが、コードはここにあります。

ありがとうございました、

4

1 に答える 1

22

この Q & A: AngularJS: Error: No controller: formで、この問題の解決策を見つけました。トリックは次のとおりです。

  1. 最初に要素を追加します
  2. 次にコンパイルします

変更されたコード スニペットは次のとおりです。

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

ここでjsfiddleが動作しています

于 2014-02-12T15:21:47.700 に答える