Question

这是对原始问题的修改：

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

但我似乎无法让它发挥作用。我只是在将index.html的内容直接粘贴在index.html中时取得了成功，这违背了重用头代码的目的。

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

Answer 1

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

应该是

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

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

Answer 2

这完美无缺。在我的服务器上试过它。双引号是必要的。什么是“使用严格”;这打破了我的结局。

angularjs - 将ng-include包含到包含脚本指令的partial中

2 个答案: