带有 Angular 1.5.x 组件的 ngMessages答案

【问题标题】：ngMessages with Angular 1.5.x Component带有 Angular 1.5.x 组件的 ngMessages
【发布时间】：2016-07-10 23:14:10
【问题描述】：

我刚刚尝试将 ngMessages 引入我的应用程序，该应用程序使用了 1.5 中添加的组件。一旦我在模板中包含对 ngMessage 的任何引用，我就会收到以下错误消息：

错误：$compile:ctreq 缺少必需的控制器。

这是 ngMessages 的常见错误，通常的补救措施是这里建议： https://docs.angularjs.org/error/$compile/ctreq?p0=ngMessages&p1=ngMessage

但是，我正在使用组件，这是一种特殊类型的指令，这似乎不是组件的选项。

有没有人让 ngMessages 在 1.5 中的组件中工作？

与指令一起使用的语法如下：

myApp.directive('myDirective', function() {
  return {
    require: 'ngModel',
    ...
  }
}

组件文档：https://docs.angularjs.org/guide/component 不包含与require 等效的内容。

【问题讨论】：

为什么没有解释就投反对票？
赞成 :) 当我检查指令和组件之间的比较时，看起来他们都接受了 require 配置docs.angularjs.org/guide/…
查看我对已接受答案的评论。看来 require 是不必要的。（我实际上尝试过。）问题是我省略了外部 ng-messages div。

标签： angularjs

【解决方案1】：

这可能会对您有所帮助。

<form name="userLoginForm" autocomplete="off">
    <input type="text" minlength="10" maxlength="10" ng-pattern="/^[0-9]+$/" required ng-model="userData.mobileNumber" placeholder="Enter Mobile Number" class="form-control login-form-input" id="mobileNumber" name="mobileNumberInput"/> 
    <div ng-messages="userLoginForm.mobileNumberInput.$error" role="alert">
      <div ng-message="required">
          This field is required
      </div>
      <div  ng-message="pattern">
        Enter correct mobile number
      </div>
      <div ng-message="minlength, maxlength">
          Your mobile number must 10 characters long</div>
      </div>
   </div>

【讨论】：

事实证明这确实很有帮助。我错过了外部 div，这实际上是导致错误的原因。错误消息和文档非常具有误导性。
有趣的是，OP 抱怨在没有解释的情况下对该问题投了反对票，但是当这个答案对 OP 有所帮助时，他们就懒得投赞成票了。
实际上，我最初投了反对票，并且由于时间限制，我不允许更改反对票。这就是为什么我在您的评论上方添加了评论并接受了答案。

【解决方案2】：

当您没有正确的 div 结构时会发生这种情况。第一个 div 必须包含 ng-message，其中一个应该是 ng-message。来自文档：

<ANY **ng-messages**="expression" role="alert">
    <ANY **ng-message**="stringValue">...</ANY>
</ANY>

Angular 的调试消息在这种情况下是没有帮助的，并且会引起更多的混乱。

【讨论】：