表单验证和字段添加了$编译 [英] Form Validation and fields added with $compile

问题描述

我有一个关于表单验证的问题。它不是为我工作在以下情形：

I have a question regarding form validation. It is not working for me in the following scenario:

我有一个全球性的形式，在窗体中动态字段使用的指令渲染。根据我场的类型指令追加最近编译指令的厄运。

I have a global form, inside the form dynamic fields are rendered using a directive. That directive based on the type of my field appends a recently compiled directive to the doom.

这里是指令：

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

我的时候，形式是无效的，必须禁止形式的按钮。问题是，该按钮被从未被禁用。

I have a button in the form that must be disabled when the form is invalid. The problem is that the button is never disabled.

在html code：

the html code:

<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/

这是我在应用程序问题的简化。田野指令是比较复杂的，但code是在这里。

This is a simplification of my problem in the app. the fields directives are more complex, but the code is here.

感谢您，

推荐答案

我找到了这个问题的解决方案，在这个问答集答： AngularJS：错误：没有控制器：形成。诀窍是：

I found solution for this issue, in this Q & A: AngularJS: Error: No controller: form. The trick is:

1. 首先做追加元素


2. 下一步要做编译

下面是改变code片断：

Here is the changed code snippet:

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

这篇关于表单验证和字段添加了$编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！