AngularJS指令 - ng-repeat内のテンプレート置換

Question

私は以下の指示コード（AngularJS 1.4.8）を持っています。私が持っている問題は、ng-repeat内のテンプレート置換を使用していることです。

(function() { 
    'use strict'; 

    angular.module('app').directive('formGroup', formGroup); 

    var template = '<div class="form-group">' + 
     '<label class="control-label">{{label}}</label>' + 
     '<div data-ng-transclude></div>' + 
     '<span class="text-danger field-validation-error" data-ng-repeat="errorMessage in {{form}}.$error.{{model}}.messages">' + 
     '{{errorMessage}}' + 
     '</span>' + 
     '</div>'; 

    function formGroup() { 
     return { 
      restrict: 'A', 
      require: '^form', 
      transclude: true, 
      replace: true, 
      scope: { 
       label: '@', 
       model: '@' 
      }, 
      template: template, 
      link: link 
     }; 
    } 

    function link(scope, element, attrs, ctrl) { 
     scope.form = element.closest('form').attr('name'); 
    } 
})(); 

これは、（サーバ・検証はインラインディレクティブでNGリピートに、サーバから返された検証エラーを置く別の指令である）、次のようにHTMLで使用されています。

<form name="myForm" data-ng-submit="submit()"> 
    <div class="col-lg-4 col-md-6"> 
     <div data-form-group data-label="Memeber number" data-model="memberNumber"> 
      <input type="text" 
        class="form-control" 
        data-ng-model="model.memberNumber" 
        data-server-validate /> 
     </div> 
</form> 

次の出力HTMLを生成します。

<form name="myForm" data-ng-submit="submit()"> 
    <div class="form-group"> 
     <label class="control-label">Member number</label> 
     <div> 
      <input type="text" 
        class="form-control" 
        data-ng-model="model.memberNumber" 
        data-server-validate" /> 
      <span class="text-danger field-validation-error" 
        data-ng-repeat="errorMessage in myForm.$error.memberNumber.messages"> 
       {{errorMessage}} 
      </span> 
     </div> 
    </div> 
</form> 

ただし、次のエラーが発生します。リンク機能の使用において

[Error] [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{form}}.$error.{{model}}.messages] starting at [{form}}.$error.{{model}}.messages] 

Answer 1

フォームコントローラは必要に応じて注入されるので、formcontrエラーメッセージは以下のように処理できます。

function link(scope, element, attrs, ctrl) {    
     var unbinder = scope.$watch(function() {return ctrl[scope.model] }, function(value) { 
      if (!value) return; 
      scope.errorMessagesList = ctrl[scope.model].$error; 
      unbinder(); 
     }) 
    } 

完全な作業サンプルは、フィドルで空くです： http://jsfiddle.net/acb3c8n7/5/

Answer 2

：テンプレートの使用において

function link(scope, element, attrs, ctrl) { 
    scope.formString = element.closest('form').attr('name'); 
    scope.form = scope.$eval(scope.formString); 
} 

：

ng-repeat="errorMessage in form.$error[model].messages" 

$eval方法は角表現として文字列を評価し、myFormへの参照が返されますオブジェクト。

Answer 3

closest()は、element引数（チェックthis）には存在しません。

また、入力にname属性を指定しないといくつかのエラーが発生します。これは、scope.myFormオブジェクトがmodel文字列のプロパティを提供する文字列を認識しないようにします。 。。。あなたのng-repeatあなたはこのような表現を提供してはならないで

<input type="text" name="memberNumber" 
        class="form-control" 
        data-ng-model="model.memberNumber" 
        data-server-validate" /> 

：

{{形}} $エラー{{モデル}}メッセージ

あなたがすべきフォームオブジェクトを添付するプロパティを作成し、このようなものを使用する - >http://codepen.io/gpincheiraa/pen/eZGZPX