angularjs - 點NG-包括到包含腳本指令

原來這是問題的一個編輯的部分：angularjs - 點NG-包括到包含腳本指令

當使用ng-include指令重複使用的所有網頁上我的頭HTML，有輕微的延遲加載/渲染頂部的導航欄。爲了緩解這個問題，我試圖將ng-include指向包含<script type='text/ng-template' id='header.html>...</script>的header.html文件，以便預加載該部分。

但我似乎無法得到它的工作。我只是直接在index.html中粘貼header.html的內容才成功，這違背了重用頭文件的目的。

script的文檔僅給出使用內聯模板的示例，ngInclude的文檔在示例模板中不使用script。

Can ngInclude加載文件，使用角的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"}; 
}

來源

2013-12-12 billyw

使用任一種方法，只是刪除周圍的額外引號。閱讀'ng-include'文檔 – charlietfl

你的第一種方法應該是最好的解決方案。也許顯示一些代碼，以便我們可以解決它爲什麼不能在你身邊工作。 – NicolasMoise

@NicolasMoise我已經更新了這個問題，以便它專注於第一種方法，並根據請求包含了一些代碼。 – billyw

這完美的作品。嘗試在我的服務器上。雙引號是必要的。什麼是「嚴格使用」;這在我的結尾打破了它。

來源

2013-12-12 22:13:56 rjm226

'「使用嚴格的」;'來自我正在遵循的教程。有一篇文章[這裏]（http://stackoverflow.com/a/1335881/2166274）。我剛剛在我的服務器上重新粘貼了上面的代碼，在Firefox和Chrome中，我仍然看到頂部導航欄在其餘內容之後加載了幾分之一秒。我認爲你沒有相同的行爲。感謝您的迴應。 – billyw

您是否正在加載所有部分頂部的標題？ – rjm226

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

應該

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

不知道這是什麼rjm226通過 '雙引號是必要的' 的含義。 ng-include都需要double和single。最近我被絆倒了。

來源

2014-09-18 02:11:11 edhubbell

angularjs - 點NG-包括到包含腳本指令

回答

相關問題