Angular ng-messages 在 UI Bootstrap 模态中需要错误

Question

我正在尝试在 UI Bootstrap 模态中使用 ng-messages 作为 UI 验证反馈。 (http://angular-ui.github.io/bootstrap/#/modal).

每次打开模式时，我都会收到此错误。

[$compile:ctreq] Controller 'ngMessages', required by directive 'ngMessage', can't be found!

一切都按照这里所说的进行设置(https://docs.angularjs.org/api/ngMessages)。所有 angularjs 文件都被引用，消息模块依赖项被添加到主模块并且指令被按应有的使用，但我仍然得到这个错误。如果我同时使用 ng-message 或 ng-messages-include，就会发生这种情况。

这是我的模式 HTML 内容模板：

<form name="formTrocaDeSenha" data-ng-submit="vm.submit(formTrocaDeSenha.$valid)" novalidate>
    <div class="form-group">
        <label class="control-label">Senha atual:</label>
        <div>
            <input type="password" name="senhaAntiga" class="form-control" style="width: 256px" data-ng-model="vm.senhaAntiga" required minlength="8" autofocus>
        </div>
        <div ng-messages="formTrocaDeSenha.senhaAntiga.$error"></div> 
        <!--data-ng-messages-include="/app/mensagensValidacao.html"></div>-->
        <div ng-message="required">Campo obrigatório</div>
        <div ng-message="minlength">Mínimo de 8 caracteres</div>
    </div>
    <button class="btn btn-lg btn-info" type="submit">Enviar</button>
    <button class="btn btn-lg btn-info" type="button" data-ng-click="vm.cancelar()">Cancelar</button>
    <br />
    <div style="width:50%" data-ng-show="vm.message != ''" class="alert alert-danger">{{vm.message}}</div>
</form>

我检查了 messges-include 指令，它已经尝试在父范围内找到控制器：

.directive('ngMessagesInclude',['$templateRequest', '$document', '$compile', function($templateRequest, $document, $compile) {
     return {
         restrict: 'AE',
         require: '^^ngMessages', // we only require this for validation sake
         link: function($scope, element, attrs) {}
     }
 };

这是 Scott Allen 的一段话，我把它作为指南，效果很好：/FipgiTUaaymm5Mk6HIfn（我不能 post 超过 2 个链接）

我想这与模态有关。任何人都知道是什么导致了这个错误？

Answer 1

在使用 ng-message 指令声明标签之前，您已经使用 ng-messages 指令关闭了标签：

<div ng-messages="formTrocaDeSenha.senhaAntiga.$error"></div>
<div ng-message="required">Campo obrigatório</div>
<div ng-message="minlength">Mínimo de 8 caracteres</div>

你应该以正确的方式嵌套它们：

<div ng-messages="formTrocaDeSenha.senhaAntiga.$error">
    <div ng-message="required">Campo obrigatório</div>
    <div ng-message="minlength">Mínimo de 8 caracteres</div>
</div>

知道了这一点，我敢打赌错误消息现在更有意义了；）

Controller 'ngMessages', required by directive 'ngMessage', can't be found!

Angular ng-messages 在 UI Bootstrap 模态中需要错误

Angular ng-messages require error inside UI Bootstrap modal

angularjs

angular-ui-bootstrap

ng-messages