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

时间:2015-12-11 17:43:28

标签: angularjs angular-ui-bootstrap ng-messages

我试图在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) {}
     }
 };

继承了斯科特·艾伦的一句话,我作为指南工作得很好:/ FipgiTUaaymm5Mk6HIfn(我不能发布超过2个链接)

我猜这是模态的东西。 任何人都知道可能导致此错误的原因是什么?

1 个答案:

答案 0 :(得分:2)

在使用ng-messages指令声明代码之前,您已使用ng-message指令关闭了代码:

<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>

知道了,我敢打赌错误信息现在更有意义了;)

  

指令&#39; ngMessage&#39;所要求的控制器&#39; ngMessages&#39;无法找到!