Question

我有一个显示产品列表的表格。我为＃34;所有产品＆＃34;显示相同的表格。页面和＆＃34;我的产品＆＃34;页。这是此表的一部分：

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

两者＆＃34;所有产品＆＃34;和＆＃34;我的产品＆＃34;页面有自己的控制器，我设置$scope.products变量。

我可以将此talbe的定义排除在单独的文件中，并将其用于＆＃34;所有产品＆＃34;和＆＃34;我的产品＆＃34;网页？

Answer 1

是的，您可以通过在父控制器中初始化products变量来实现... 并且请记住，当您使用ng-include时，它会创建自己的范围，因此在对子文件中的任何输入（即要包含的文件）使用任何ng模型时要小心。

永远不要将ng-model分配给子文件中的基元

最好参考：What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

Answer 2

使用ng-include。是的，您可以创建包含这些内容的table.html文件

或者，您甚至可以创建内联角度模板

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

然后包括你想要的地方：

<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>

AngularJS。在几个地方使用模板

3 个答案: