0

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

4

1 回答 1

0

ngMessages指令由数据绑定中使用的form、$rootScope或$scope对象中的更改初始化。该ngMessage指令用于绑定到父节点，每个ngMessages指令用于绑定到值为trueor的特定子节点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>

参考

于 2016-03-12T06:47:03.450 回答