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中使用以下方式（服務器驗證是另一指令，使該指令從服務器返回到NG-重複在線驗證錯誤）。

<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 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你不應該提供這樣的表達：。

{{形式}} $誤差{{模型}}消息

你應該創建一個屬性來附加表單對象並使用一些像這樣的 - >http://codepen.io/gpincheiraa/pen/eZGZPX