AngularJS指令：编译还是不编译

已更新 根据非编译版本正在工作。但主要问题仍然存在：编译还是不编译

我正在尝试创建动态表单字段（我的应用程序需要很多表单和很多字段）

因此，我创建了一个控制器，如下所示：

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>

使用模板：

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

{{fieldLabel}}
威马根
Zbyt mało znaków（最低限度为6）
Zbyt dużo znaków（maxymalna-liczba至20岁）

我想知道哪种方法是最好的或更具棱角性的

下面是一个带compile的plunker：

---

这里有一个没有编译的plunker:

我更喜欢方法2。它更具可读性和可维护性。它们并不完全等效，因为方法2引入了一个隔离的作用域，而方法1使用原型作用域继承。然而，要使它们相等并不难。

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>