这是对原始问题的编辑:
当使用该ng-include
指令在所有页面上重用我的标题 HTML 时,加载/呈现顶部导航栏会有一点延迟。为了缓解这个问题,我试图指向ng-include
一个 header.html 文件,其中包含<script type='text/ng-template' id='header.html>...</script>
以便它预加载部分。
但我似乎无法让它工作。我只是在将 header.html 的内容直接粘贴在 index.html 中时才成功,这违背了重用标头代码的目的。
script的文档仅给出了使用内联模板的示例,而ngInclude的文档未script
在示例模板中使用。
可以ngInclude
加载使用 Angularscript
指令的文件吗?
索引.html:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Testing</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css">
<script src='lib/angular/angular.js'></script>
<script src='js/main.js'></script>
</head>
<body>
<div ng-controller="HeaderCtrl">
<div ng-include src="header.url"></div>
<!-- script works when it is put directly in index.html:
<script type="text/ng-template" id="header.html">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>
<a class="brand" href="#">Test</a>
</li>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
</div>
</div>
</script>
-->
</div>
</body>
</html>
header.html:
<script type="text/ng-template" id="header.html">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>
<a class="brand" href="#">Test</a>
</li>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
</div>
</div>
</script>
主.js:
"use strict";
// I've also tried this with "use strict"; removed
var myApp = angular.module('myApp', []);
function HeaderCtrl($scope) {
$scope.header = {name: "header.html", url: "header.html"};
}