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中使用（server-validate是另一个指令，它将从服务器返回的内联验证错误放入指令中的ng-repeat）。

<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

在链接功能中使用：

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方法将字符串计算为Angular表达式，并返回对myForm对象的引用。

Answer 2

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中，你不应该提供这样的表达式：

{{形式}}。$错误。{{模型}}。消息

你应该创建一个属性来附加表单对象，并使用像这样的 - ＆gt; http://codepen.io/gpincheiraa/pen/eZGZPX

Answer 3

由于表单控制器是根据需要注入的，因此使用formcontroller，可以像下面一样处理错误消息。

L.geoJson

完整的工作样本可用于小提琴： http://jsfiddle.net/acb3c8n7/5/

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

3 个答案: