标签: angularjs-ng-template

我正在使用angularUI typehead作为输入元素.我正在使用自定义模板来显示值.一切正常.我的问题是如何将其ng-template分成单独的文件,以便它也可以在其他文件中重复使用.

如果我的话不清楚,请注意我是指ng-templates具体而不关心其他单独的HTML内容

这是代码:

 // custom template begin 
 // this is the ng-template
 // I'd like to move this custom template into to another file 
 // similar to partials
 <script type="text/ng-template" id="customTemplate.html">
    <a>
        <b>{{match.model.name}}</b>
        <div>{{match.model.username}}</div>
    </a>
</script>
 //custom template end


// input element makes use of the ng-template defined above
<div class="form-group">
<label class="col-md-2 control-label normal" for="assignTo">Assign To</label>
 <div class="col-md-3">
    <input name="bug_assignTo" id="bug_assignTo" ng-model="bug.assignTo" typeahead="user.username as user.name for user in config.users | filter:$viewValue | …

我有一个视图正在加载嵌入式文件后面text/ng-template没有找到ng-include.脚本块位于视图文件的最顶部:

<script type="text/ng-template" id="stringCondition">
    <!-- template guts -->
</script>

我将在以后的文件中加载:

<ng-include src="'stringCondition'"></ng-include>

但是在控制台中产生404错误:

GET http://localhost/~me/stringCondition 404 (Not Found)

我已经在命名上尝试了几种变体(比如最后有.html)并使用ng-include作为属性而不是高级元素.一切都没有运气.

什么可能导致嵌入式ng-template无法ng-include在同一个视图文件中注册？

更新:

正如评论和答案所指出的那样,我的代码的基本设计是正确的.但是某些事情导致ng-template(显然)无法使模板可用于系统.

我更新了我的代码以从HTML文件(而不是嵌入的模板)中提取,它工作正常.

是否有一种常见的情况,我可能会遇到这种休息ng-template？

我正在编写一个小工具,我需要检查是否定义了某个ng-template.我的所有模板定义如下:

<script type="text/ng-template" id="example.html">...</script>

所以通过$ http检查文件是否存在对我来说不起作用.如何检查所述模板是否已定义？我到目前为止看到的唯一选择是检查DOM:

if(angular.element.find('script#example.html').length > 0) { ...

...但我真的很喜欢一个不需要检查DOM的更好的解决方案.

我们正在开发一个相当大的 AngularJS 应用程序。目前我们正在调查一些页面加载性能问题。我们的页面准备就绪需要相当长的时间。

原因之一（以及其他常见的嫌疑人，例如观察者过多）可能如下：

我们使用 ngTemplates 来预加载所有指令模板。由于我们有如此多的指令（​​大约 100 个，我们喜欢声明式编程；-），ngTemplate JS 文件大约 170KB，因此在页面加载时需要大约 2 秒的时间来处理和解析（请参阅随附的火焰图）。

如果我们禁用 ngTemplates，感知的页面速度会好得多，因为 Angular 有“更小的”位来处理和显示。

但我认为在生产中执行这 100 个 XHR 调用来加载指令模板是非常糟糕的做法。烦人的是，Angular 甚至加载/解析实际上并未使用 ngIf 渲染的指令模板（AngularJS：无论 ng-if 条件如何加载指令模板）。

我附上了页面加载的 Chrome 时间线/火焰图的屏幕截图。您会注意到火焰图顶部有一个大的黄色条。如果我们不使用 ngTemplates，这个栏将被分成更小的部分（这似乎会导致更好的“感知页面速度”）。

你们中有人有类似的问题吗？或者对我们如何改进页面加载有任何意见？

我们感谢任何意见！

迈克尔

如果我的 fileInput 元素位于普通 div 中，那么它可以正常工作。但如果我把它放在里面<ng-template></ng-template>那么我就会得到它的未定义。

这是我的代码：

超文本标记语言

<ng-template #content let-c="close" let-d="dismiss">
   <div class="modal-header">
      <h4 class="modal-title">Modal title</h4>
      <button type="button" class="close" aria-label="Close" (click)="d('Cross click')"></button>
   </div>
   <div class="modal-body">
      <form #documentsForm="ngForm" (ngSubmit)="onEditSubscriberDocumentsSubmit(documentsForm.value);documentsForm.reset()">
         <input #fileInput type="file" #select name="document" [(ngModel)]="document" (click)="onDocUpload()" />       
         <input type="submit" value="Save" class="btn btn-success" [hidden]="addDocHidden">
      </form>
   </div>
   <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
   </div>
</ng-template>

TS

import { Component, OnInit, ViewChild , ElementRef} from '@angular/core';

export class EditSubscriberComponent {
    constructor(private http: Http, private route: ActivatedRoute, private router: Router, private …