Question

更新根据{{3}}非编译版现在正在运行。但主要问题仍然有效：编译或不编译

我正在尝试创建动态表单域（我的应用程序需要许多具有大量字段的表单）

所以我创建了一个控制器：

KPNControllers.controller('panelAccountCtrl', ['$scope',
  function panelAccountCtrl($scope) {
    $scope.panelAccountTabItems = [
      {"title" : "Personal Data",
       "contentUrl":"partials/panel/account/personal.html",
       "fields" : [
         {"name" : "first_name", "label" : "First name", "required" : "true", "min" : 3, "max":20, "type":"text"},
         {"name" : "last_name", "label" : "Last Name", "required" : "true", "min" : 3, "max":20, "type":"text"}
        ]},
      {"title" : "Login", "contentUrl" : "partials/panel/account/login.html"},
      {"title" : "Password", "contentUrl" : "partials/panel/account/password.html"}
  ];
  }])

（只有第一项有字段[]，但当然最终所有字段都有）

然后我创建了html：

 <div class="box all-borders">
    <h3 class="special">{{tabItem.title}}</h3>
    <form name="mainForm" class="form-horizontal" novalidate>
        <form-field ng-repeat="field in tabItem.fields" form="mainForm" label="{{field.label}}" field-type="{{field.type}}" field-id="{{field.id}}"></form-field>
    </form>
  </div>

（并非所有的attrs都被设置 - 但这只是例如）

所以现在是指令的时候了。

我找到了两个解决方案：

使用编译：（更新后未编辑）

KPNDirectives.directive("formField", function () {
  return {
    restrict: 'E',
    replace: true,
    compile: function (element, attrs) {
      var type = attrs.type || 'text';
      var required = attrs.hasOwnProperty('required') ? "required" : "";
      var formName = 'Form';
      var fqFieldName = formName + '.' + attrs.fieldId;
      var inlineErrorRequired = attrs.hasOwnProperty('required') ? '<span class="help-block" ng-show="' +fqFieldName+ '.$error.required">Required</span>' : "";
      var htmlText = 
        '<div>' +
          '<div class="form-group" ng-class="{true: \'has-error\', false: \'has-success\'}['+ fqFieldName + '.$invalid]">'+
            '<label class="control-label col-sm-2" for=' +attrs.fieldId + '">' +attrs.label+ '</label>' +
            '<div class="col-sm-6">' +
              '<input type="' + type+ '" class="form-control" id="' +attrs.fieldId + '" name="' +attrs.fieldId + '" ng-model="'+ attrs.ngModel + '" '+ required + ' />' +
              inlineErrorRequired +
            '</div>' +    
          '</div>' +
        '</div>';
      element.replaceWith(htmlText);
    }
  };   
})

没有编译：更新后编辑

KPNDirectives.directive("formField", function () {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      fieldModel: '=',
      fieldLabel: '=',
      fieldType: '=',
      fieldName: '='
    },
    templateUrl: 'templates/formField.html'
  };   
})

使用模板：

<div class="form-group" ng-form="form" ng-class="{true: 'has-error', false: 'has-success'}[form.fieldName.$invalid]">
  <label class="control-label col-sm-2" for="fieldName">{{fieldLabel}}</label>
  <div class="col-sm-6">
    <input class="form-control" type="{{fieldType}}" placeholder="wprowadź aktualny email" name="fieldName" ng-model="fieldModel" ng-minlength=6 ng-maxlength=20 required/>
    <span class="help-block">
      <span ng-show="form.fieldName.$error.required">Wymagane</span>
      <span ng-show="form.fieldName.$error.minlength">Zbyt mało znaków (minimalna liczba to 6)</span>
      <span ng-show="form.fieldName.$error.maxlength">Zbyt dużo znaków (maxymalna liczba to 20)</span>
      &nbsp;
    </span>
  </div>
</div>

我想知道哪种方法最好或更有棱角。

这是一个带编译的plunker：angularjs passing parameters through directive and ng-repeat 这是一个没有编译的plunker：http://plnkr.co/edit/BDIn5weqima5ve3G0Q2l?p=preview

AngularJS指令：编译或不编译

0 个答案: