AngularJS指令-ng repeat内的模板替换

我有以下指令代码（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');
    }
})();

---

在链接功能中，请使用：

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

对象的引用。

最近的（）

不在

元素

参数中（检查）

还有几个错误，例如在输入中没有提供

名称

属性，这导致scope.myForm对象无法识别

模型

字符串如何提供属性

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

---

由于表单控制器是根据需要注入的，因此可以使用表单控制器来处理错误消息，如下所示

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();
        })
    }

完整的工作样本可在小提琴中获得：

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

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

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();
        })
    }