Angular ng-include 學習實例

ng-include 可以引入外部的文件到當前視圖中。這樣可以增強復用性。 最簡單的用法  <div ng-include src="'/public/template/tpl.html'"></div> 這樣直接把tpl.html加載當前視圖中了。 我們還可以使用如下定義個模板。id是模板名。如這里是"tpl/tpl1"

<script type="text/ng-template" id="tpl/tpl1">
       <p>我是模板內容</p>
</script> 

這樣的話可以直接使用ng-include="'tpl/tpl1'"。來調用這個模塊。

官網文檔：script

在使用時要注意的幾點：

 

1. 引入ng-include="'tpl/tpl1'"。因為模板名是字符串，要是單引號括起來，如果寫成ng-include="tpl/tpl1" 會將tpl/tpl1解析成變量，導致引入無效。

2. 使用ng-include src="'url'"  src屬性中的地址不能跨域。ng默認只能是同一域名和http協議下的文件才能成功引入。這里涉及到跨域就不討論了。

 

See the Pen Angular ng-include學習 by finley (@mafeifan) on CodePen.