angularjs - указывает ng-include на частичное, содержащее директиву script

Это редактирование исходного вопроса:

При использовании ng-include Директива для повторного использования моего заголовка HTML на всех страницах, есть небольшая задержка в загрузке / рендеринге верхней панели навигации. Чтобы облегчить проблему, я пытаюсь указать ng-include в файл header.html, который содержит <script type='text/ng-template' id='header.html>...</script> так что он предварительно загружает частичное.

Но я не могу заставить его работать. Я добился успеха, только когда вставлял содержимое header.html непосредственно в index.html, что противоречит цели повторного использования кода заголовка.

Документы для скрипта дают только пример использования встроенного шаблона, а документы для ngInclude не используют script в шаблонах примеров.

Можно ngInclude загрузить файл, который использует Angular's 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"};
}
Источник

2 ответа 

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

должно быть

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

Не уверен, что это именно то, что rjm226 подразумевал под "двойными кавычками". Для ng-include необходимы как double, так и single. Я был сбит с толку этим недавно.

Источник

Это работает отлично. Пробовал на моем сервере. Двойные кавычки были необходимы. Что с "использовать строгое"; Это ломает это с моей стороны.

Источник
Другие вопросы по тегам