2015-02-23 77 views
4

我試圖創建一個腳本類型的文本/ ng-template來將我的錯誤消息模板放入$ templateCache中。我想要這個腳本文件是遠程的,在它自己的文件之外的HTML。ng-messages-AngularJS ng模板包括

<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,我可以憑身份證訪問它。

<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

+1

如果是遠程無需腳本標記,則存儲爲html文件 – charlietfl 2015-02-23 16:59:11

+0

感謝您的及時回覆。我希望將它保存在一個腳本標記中,該腳本標記在我們的minify/uglify過程中被捆綁。而不是使用ng-message-include =「app/module/feature1/errorMessages.html」我希望它很簡單ng-message-include =「error-messages」只是模板的id。 – Harbinger 2015-02-23 17:21:55

+0

好吧,你不能有它的兩種方式,如果角度沒有找到它的ID它使一個AJAX請求,如果路徑無效 – charlietfl 2015-02-23 17:25:25

回答

12

請檢查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); 
    }) 
}) 

裝入NG的消息,包括模板的應用程序的運行階段,使用$ HTTP,並將其保存在templateCache。

+0

謝謝你,我正在向$ templateCache路徑前進,以獲得我想要的結果。很好的使用承諾:-) – Harbinger 2015-02-23 18:38:40

+1

它不起作用。或者我錯過了一些東西。 – Eugene 2015-05-20 13:57:00

+0

不錯的解決方案,我也喜歡使用這種方法,因爲我可以重新使用模板的ID,每當消息的路徑發生變化時(在開發過程中我們都知道這可能發生),您只需要在一個位置更改它:) – 2016-04-19 09:48:02