Question

在AngularJS中遇到指令的麻烦。

我有以下HTML代码：

<div ng-controller="Controller">
<table>
    <thead>
    .......
    </thead>
    <tfoot>
    .......
    </tfoot>
    <tbody>
        <tr ng-repeat="values in Items.rows">
            <td ng-repeat="data in values">{{data}}</td>
        </tr>
    </tbody>
</table>
</div>

我元素的控制器：

var MyApp = angular.module('MyApp', []);
Application.controller('Controller', ['$scope', '$filter', function($scope, $filter) {

// Some logic
$scope.Items = {

     head: ["id", "Name", "Age"],

     rows: [
             ["1", "Bob", "23"],
             ["2", "Sam", "23"],
             ["3", "Joe", "23"]
           ]
     };
           // Some other logic
    }
}

最后指示：

Application.directive('Table', function() {
  return {
           restrict: 'E',
           replace: true,
           scope: {},
           templateUrl: 'Table.html'
         }
});

问题出在HTML页面呈现中。当我尝试显示该页面时，我的数据不会显示在表格中...有任何想法如何修复它？

Answer 1

您应该迭代rows数组，因为Items是一个对象：

<tbody>
        <tr ng-repeat="values in Items.rows">
            <td ng-repeat="data in values">{{data}}</td>
        </tr>
    </tbody>

Answer 2

该指令应该做什么？如果你想做我认为你做的事你就不需要了。

你也重复一遍，但我认为你需要items.rows：

<div ng-controller="Controller">
<table>
    <thead>
    .......
    </thead>
    <tfoot>
    .......
    </tfoot>
    <tbody>
        <tr ng-repeat="values in Items.rows">
            <td ng-repeat="data in values">{{data}}</td>
        </tr>
    </tbody>
</table>
</div>

Answer 3

如果你的指令只做了什么，用Table.html替换特定标签，那么我认为你应该使用ng-include，例如以这种方式：

查看：

<div ng-controller="Controller"> <div ng-include="'Table.html'"> </div> </div>

<强> Table.html：

<table> <thead> ....... </thead> <tfoot> ....... </tfoot> <tbody> <tr ng-repeat="values in Items.rows"> <td ng-repeat="data in values">{{data}}</td> </tr> </tbody> </table>

但是，如果你真的想要一个指令（我的意思是“如果你想使用链接/编译功能而不仅仅是加载模板”），你应该知道范围如何与指令一起使用。首先，scope: {}将为指令创建一个新的隔离范围，该范围为空（因此Items变量不可见）。您可以摆脱隔离范围（通过保留scope未设置）或者我认为更好的解决方案，写一下：

scope: { items: '&' }

它将为此指令创建一个新的隔离范围，但在此范围内将有items变量，该变量将设置为items元素上分配给table属性的任何内容。< / p>
查看：

<div ng-controller="Controller"> <generic-table items="Items"></generic-table> </div>

Table.html：与之前相同。

请注意，您还应该将指令的名称更改为genericTable或任何您想要的名称，因为在旧方案中table是一个指令 - 想象一个包含其自身的指令，这不是一个好主意，我想。

数据不会出现在使用AngularJS创建的表中

3 个答案: