Question

我正在尝试使用服务器响应动态创建表单。表单可能包含嵌套，分组等字段。我已经尝试为我的字段类型创建一个指令作为＆＃39; form-field＆＃39;并使用ng-include指令重复所有嵌套字段。

当我使用ul-li执行此操作时，输出看起来是正确的，但是当我开始使用fieldsets和textfields时，输出根本不会为textfields呈现。

    // Code goes here

angular.module('NestedForm', []).
controller('formController', function($scope) {


}).directive('formField',function($compile) {
  return {
        replace:true,
        require:'ngModel',
        scope:{
          data :'=data',
          ngModel : '='
        },
        restrict:'E',
        link : function($scope, $element, $attrs)
        {
          var type = $scope.data.type;
          var html = "";
          switch(type)
          {
            case 'textbox' :
              html = '<input id=\''+$scope.data.name+'\'  type="text" ng-model="ngModel" class="form-control">';break;
            case 'fieldset' :
              html = '<fieldset><legend>'+$scope.data.name+'</legend></fieldset>';break;
            default:
              break;
          }
          var $e =$compile(html)($scope);
          $element.replaceWith($e);
        }
  }
});

http://plnkr.co/edit/9b7wnPaaeppdJyq26qlN

感谢您的帮助。

Answer 1

首先，你的问题太长了。许多人只是想快速阅读问题，理解并回答他们是否了解问题。如果问题太长，我们读得不快，理解不正确，答案不是来自对你问题的充分理解。

我没有完全阅读你的问题，但似乎你正在取代完整的元素。

检查一下。

http://plnkr.co/edit/01T5d4ngGviKI0jPafSO?p=preview

      var $e =$compile(html)($scope);
      $element.append($e);  //instead of replacing it

使用指令的Angular Nested表单字段

1 个答案: