angularjs - 将 ng-include 指向包含脚本指令的部分答案

【问题标题】：angularjs - Point ng-include to a partial that contains a script directiveangularjs - 将 ng-include 指向包含脚本指令的部分
【发布时间】：2013-12-31 13:13:21
【问题描述】：

这是对原始问题的编辑：

当使用 ng-include 指令在所有页面上重用我的标题 HTML 时，加载/呈现顶部导航栏会稍有延迟。为了缓解这个问题，我试图将ng-include 指向一个包含<script type='text/ng-template' id='header.html>...</script> 的header.html 文件，以便它预加载部分。

但我似乎无法让它工作。我只有将header.html的内容直接粘贴到index.html中才成功，这违背了重用header代码的目的。

script 的文档仅给出了使用内联模板的示例，ngInclude 的文档在示例模板中没有使用script。

ngInclude 可以加载使用 Angular 的 script 指令的文件吗？

index.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>

main.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"};
}

【问题讨论】：

使用任何一种方法，只需删除 url 周围的多余引号。阅读ng-include文档
您的第一种方法应该是最好的解决方案。也许显示一些代码，以便我们可以解决为什么它对您不起作用。
@NicolasMoise 我已经更新了这个问题，使它专注于第一种方法，并根据要求包含了一些代码。

标签： html angularjs angularjs-ng-include

【解决方案1】：

<div ng-include src="header.url"></div>

应该是

<div ng-include src="'header.url'"></div>

不确定这是否是 rjm226 所指的“双引号是必要的”。对于 ng-include，double 和 single 都是必需的。我最近被这个绊倒了。

【讨论】：

【解决方案2】：

这非常有效。在我的服务器上试过。双引号是必要的。 “使用严格”是什么？这打破了我的结局。

【讨论】：

"use strict"; 来自我正在关注的教程。上面有一个帖子here。我刚刚在我的服务器上重新粘贴了上面的代码，在 Firefox 和 Chrome 中，我仍然看到顶部导航栏在其余内容之后加载了几分之一秒。我认为您没有相同的行为。感谢您的回复。
您是否在所有部分的顶部加载标题？