11

我有一个表格，其中的行通过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：显示此问题的一个实例和指令代码。

4

2 回答 2

6

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

于 2013-08-25T17:16:11.027 回答
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);
                    }
                });


            }
        }
    }]);

我的模板.html

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

笨蛋

于 2015-01-20T14:27:46.080 回答