Директива 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'); 
    } 
})(); 

Он используется в HTML следующим образом (сервер-Validate еще одна директива, которая ставит ошибки в линии проверки, возвращаемые с сервера в нг-повтора в директиве).

<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

Поскольку контроллер формы вводится по мере необходимости, используя формуcontr oller, сообщения об ошибках могут обрабатываться, как показано ниже.

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, предоставленную как свойство.

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

В ваших ng-repeat вы не должны обеспечить выражение вроде этого:...

{{форма}} $ ошибок {{MODEL}} сообщений

вы должны создайте свойство для прикрепления объекта формы и используйте примерно такой вариант ->http://codepen.io/gpincheiraa/pen/eZGZPX