Question

我有一个表格，通过ng-repeat重复这些行。我正在尝试创建一个模板，为每行<td>

生成列<tr>

app.directive("customtd", function(){
  return {
    restrict: 'E',
    template: "<td>{{position.Name}}</td><td>{{position.Code}}</td>",
    replace: true,
    scope: {
      position: '='
    }
  }
});

<table>
  <tr ng-repeat="p in positions">
    <customtd position="p"></customtd>
  </tr>
</table>

问题是我的自定义td模板根本没有呈现。在这里，我打算将<customtd>替换为n个<td> s - 这将根据我的数据对象上的属性数量来决定，但目前我只是想让一个简单的指令工作将输出两列。

MYPLUNKER：显示此问题的实例和指令代码。

Answer 1

正如评论中所指出的，指令的模板应该具有单个根元素。所以我建议你将tr元素移动到指令的模板，如下所示：http://plnkr.co/edit/YjLEDSGVipuKTqC2i4Ng?p=preview

Answer 2

正如Pavlo所写，您可以将tr元素移动到指令的模板。另一个选项是使用td元素和指令，用您要使用的模板替换td。

<table>
  <tr ng-repeat="p in positions">
    <td replace-me template="mytemplate.html" position="p"></td>
  </tr>
</table>

指令replaceMe

.directive("replaceMe", ["$compile", '$http', '$templateCache', function ($compile, $http, $templateCache) {
        return {
            restrict: 'A',
            scope: {
               position: "="
            },
            link: function (scope, element, attrs) {
                function getTemplate(template) {
                    $http.get(template, {cache: $templateCache}).success(function (templateContent) {
                        element.replaceWith($compile(templateContent)(scope));
                    });
                }
                scope.$watch(attrs.template, function () {
                    if (attrs.template) {
                        getTemplate(attrs.template);
                    }
                });


            }
        }
    }]);

<强> mytemplate.html

<td>{{position.Name}}</td>
<td>{{position.Code}}</td>
<td another-my-directive></td>

plunker

指令不在内部工作，即ng-repeat绑定

2 个答案: