AngularJS。在幾個地方使用模板

Question

我有一個顯示產品列表的表格。我顯示「所有產品」頁面和「我的產品」頁面的相同表格。這是該表的一部分：

<tr ng-repeat="product in products> 
    <td>{{product.id}}</td> 
    <td>{{product.name}}</td> 

兩個「所有產品」和「我的產品」頁面都有自己的控制器，我設置了$scope.products變量。

我可以排除此talbe的定義以分開文件並將其用於「所有產品」和「我的產品」頁面嗎？

Answer 1

是的，你可以通過初始化變量產品在父控制器... 做到這一點，請記住，當你使用ng-include它會創建自己的範圍，所以在使用任何NG-模型在子文件任何輸入要小心（即包括它是文件..）

永不NG-模型分配給原始的子文件

更好的參考這樣的：What are the nuances of scope prototypal/prototypical inheritance in AngularJS?

Answer 2

使用ng-include。是的，你可以創建這些內容

或者，你甚至可以創建一個內聯角模板

<script type="text/ng-template" id="table.html"> 
    <tr ng-repeat="product in products> 
     <td>{{product.id}}</td> 
     <td>{{product.name}}</td> 
    </tr> 
</script> 

一個table.html文件然後包括任何你想要的：

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

Answer 3

創建一個單獨的HTML第一頁：

table.html

<table> 
<tr ng-repeat="product in products> 
    <td>{{product.id}}</td> 
    <td>{{product.name}}</td> 
</tr> 
</table> 

然後它包含：

<div data-ng-include="table.html"></div>