javascript - 将表单填充到 templateURL 以与 ngMessages 一起使用

Question

我是 Angular 的新手，正在尝试指令。

我希望能够使用

<div ng-messages="form.$error">
    <div ng-message="required">You did not enter a field</div>
</div>

在像这样的自定义指令中，

<div class="form-group">
    <label class="form-label" for="s-input-{{name}}">
        {{text.human}}
        <span ng-if="text.subtext" class="form-hint">{{text.subtext}}</span>
    </label>

    <select ng-required="required" ng-model="model" class="form-control"  id="s-input-{{name}}" name="{{name}}" ng-options="t for t in text.select"></select>
    <div ng-messages="form.$error">
        <div ng-message="required">You did not enter a field</div>
    </div>
</div>

我可以通过在指令元素下方使用 ng-messages 来使其工作，但不在其中。

虽然我真的不知道如何将表单传递给模板，以便 ng-messages 可以访问它。

我已经设置了一个 plunker 来向您展示我的基本设置。

http://plnkr.co/edit/ELx6Fd2eLN4CJjEnzRGM?p=preview

我知道我需要使用 require: '^form', 来请求表单，尽管我不确定如何在模板 URL 中使用/访问。

我已经苦思冥想了一段时间，非常感谢您的帮助!谢谢。

Answer 1

当您使用 require: '^form' 要求表单指令时，您可以在 link 函数中访问该 FormController。然后，您可以像这样简单地将该 Controller 附加到指令的范围:

link: function(scope, element, attributes, formController) {
    scope.form = formController;
}

然后在模板中引用它:

<div ng-messages="form.$error">
    <div ng-message="required">You did not enter a field</div>
</div>