从哪里启动 Angular 中的 ngMessages 指令，我可以手动启动它吗？答案

【问题标题】：From where is a ngMessages directive in angular initiated, and can I initiate it manually?从哪里启动 Angular 中的 ngMessages 指令，我可以手动启动它吗？
【发布时间】：2015-10-12 13:38:52
【问题描述】：

我正在使用 ngMessages 进行表单验证。我面临的问题是我的 html 是由 javascript 动态创建的，而 angular.message.js 是在此之前加载的。所以我想在创建所有动态 HTML 元素时触发 ngMessage。

【问题讨论】：

这听起来像你的方法都是错误的。几乎没有理由去 Angular 之外生成 DOM 元素，当你这样做时，它应该被隔离到一个可以编译成 Angular 的指令中。如果没有一个可靠的例子来说明你正在尝试做什么以及为什么你必须超越角度，那么你所描述的情况就没有解决方案。
除此之外，您的措辞暗示了对角度如何运作的误解。 Angular 是 JavaScript，所以说您正在“通过 javascript”动态创建 html 是一种气味，您只是不知道如何让 Angular 帮助您完成任务。
我正在制作一个表单构建器，其中 HTML 由 javascript 动态生成。每当用户拖放元素时。我将这些 html 元素保存为 JSON 格式，并使用 angular sanitizer 将其呈现为 HTML。我试图找出错误，我可能发现我的 ngmessages 模块首先加载，而 ngsanitize 稍后呈现。
这里是stackoverflow.com/questions/33077627/…情况的例子
这个不会工作。您不能将角度指令绑定到由ng-bind-html 添加的元素在编译阶段已经完成，除非您可以再次触发$compile，并且在许多情况下这会导致循环引用。在尝试这种复杂的逻辑之前，您至少需要对角相位有一个非常扎实的理解。

标签： angularjs validation ng-messages

【解决方案1】：

ngMessages 指令由数据绑定中使用的form、$rootScope 或$scope 对象的更改初始化。 ngMessage 指令用于绑定到父节点，每个ngMessages 指令用于绑定到值为true 或false 的特定子节点。

使用以下流程：

注入templateCache的过滤器
过滤器中的一个条件，它将生成的 HTML 模板字符串及其 ID 添加到 templateCache
过滤器中的一个条件，它将ngMessages 指令指定的键的值设置为true

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.js"></script>

<script>
  angular.module('foo', ['ngMessages']);
</script>

<script>
function bop(model, view)
 {
 var i = 0, len = 100000, buz = "";
 
 for (i; i < len; i++)
   {
   buz = buz.concat(i);
   }
  
 bop.cache.put('listContent', buz);
 view.loaded = true;
   
 return model;
 }

 function baz($templateCache)
   {
   bop.cache = $templateCache;
   
   return bop;
   }

 baz.$inject = ['$templateCache','$rootScope'];

 angular.module('foo').filter('baz', baz);
</script>

<div ng-app="foo">
  <form name="myForm">
  <label>Check Me<input type="checkbox" ng-model="$root['required']"></label>
  <div ng-include="'listContent' | baz:myForm"></div>
  <div ng-messages="$root" style="color:green" role="alert">
    <div ng-message="required">?</div>
  </div>
  <div ng-messages="myForm">
    <div ng-message="loaded" style="color:blue">Loaded</div>
  </div>
    
</div>

参考文献

【讨论】：