javascript - AngularJS ng-template with ng-messages-include

Question

我正在尝试创建一个脚本类型的 text/ng-template 以将我的错误消息模板放入 $templateCache 中。我希望这个脚本文件是远程的，在 HTML 之外的它自己的文件中。

<script type="text/ng-template" id="error-messages">
  <span ng-message="required">This field is required.</span>
  <span ng-message="min">This number must be larger than {{min}}.</span>
  <span ng-message="max">This number must be smaller than {{max}}.</span>
  <span ng-message="number">A number is required.</span>
  <span ng-message="date">A date is required.</span>
</script>

然后在 HTML 中我想引用这个我认为应该在 $templateCache 中的模板，我可以通过 Id 访问它。

<form name="userForm">       
      <div class="form-group">
        <label for="requiredInput">Required</label>
        <input type="text" class="form-control" id="required" name="requiredInput" 
        ng-model="user.required" required />
        <div ng-messages="userForm.requiredInput.$error" ng-messages-include="error-messages"></div>
      </div>
</form>

如果我将脚本与 HTML 内联，它就可以正常工作，但我希望它位于远程文件中。当我将它移动到远程文件时，我的 HTML 无法找到我的模板错误消息。

这是我分享的第一个 Plunker。如果您无法访问，请告诉我。 http://plnkr.co/edit/NgSm7piaECWBab1LOmp3?p=preview

Answer 1

请检查plunker - http://plnkr.co/edit/luhUuZURCOeHSuEhi11x?p=info

angular.module('app', ['ngMessages'])
.run(function ($templateCache, $http) {
  $http.get('scriptTemplate.html')
  .then(function(response) {
    $templateCache.put('error-messages', response.data); 
  })
})

在应用程序的运行阶段使用 $http 加载 ng-messages-include 模板并将其保存在模板缓存中。