如何正確使用ng-include

我是Angular.js的初學者，並且在指令ng-include中遇到了一些問題。如何正確使用ng-include

我想顯示內部index.html

嘛header.html內容，這裏是我的樹例如：

myapp 
. public 
. .  lib 
. .  . angular.js 
. .  . 
. header.html 
. index.html

了header.html代碼：

<h1>Hello Angular</h1>

的Index.html代碼：

<html ng-app> 
    <head> 
    <meta charset="utf-8"> 
    <script src="public/lib/angular.js"></script> 
    </head> 
    <body> 
    <ng-include src="'header.html'"></ng-include> 
    </body> 
</html>

當我運行index.html，我有這樣的事情：

<!-- ngInclude: undefined -->

來源

2015-02-24 Alexandre Thebaldi

最簡單的方法來檢查你輸入的是對還是錯，用'href =「header.html」'做一個錨點，然後在那裏看到結果。我不知道你是如何開始你的應用的，所以我不知道任何事情。 – Kai 2015-02-24 17:39:33

這應該工作。請參閱http://stackoverflow.com/questions/25499228/angular-ng-include-what-file-path-would-i-use。有些事情沒有在你的問題中顯示出來。 – isherwood 2015-02-24 17:42:26

參考[this]（http://stackoverflow.com/questions/13943471/angularjs-ng-include） – Arkantos 2015-02-24 17:45:41

您是通過Web服務器或通過file://協議訪問該文件訪問的應用程序？在後一種情況下，由於瀏覽器的安全限制，它將不起作用。解決方案是安裝Apache或Nginx並通過類似http://localhost/myapp/index.html的方式訪問應用程序。

來源

2015-02-24 17:57:49

感謝信息夥伴 – 2015-02-24 18:31:20

我正在尋找一種替代方案，不需要使用Web服務器或Ajax來導入HTML文件，但它似乎不可能 – 2015-02-24 18:37:55

您可以使用[腳本指令]使用內聯模板（ https://docs.angularjs.org/api/ng/directive/script）。你可以在鏈接頁面的底部看到一個例子。 – 2015-02-25 00:36:29

我不知道，如果有一個ng-include標籤包括其他模板。我們通常做這種方式

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

來源

2015-02-24 17:43:12 Arkantos

自定義元素是一個有效的選項（有幾個IE警告）。 – isherwood 2015-02-24 17:48:20

另外，如果你這樣做，它應該是

...只有在使用src =的情況下，如果你使用的是ng-include標籤。 – scottier 2015-08-20 18:59:03

如何正確使用ng-include

回答

相關問題