角transclusion与表 [英] Angular transclusion with tables

问题描述

我试图封装的HTML表格，允许可点击的，可排序的列作为指令（请参见 http://jsfiddle.net/vojtajina/js64b/14/ ）。
也就是说，我希望能够做这样的事情：

I'm trying to encapsulate an html table that allows for clickable, sortable columns as a directive (see http://jsfiddle.net/vojtajina/js64b/14/). That is, I'd like to be able to do something like:

<sortable header="headerObject">
   <tr ng-repeat="thing in things">{{thing}}</tr>
</sortable>

，其中指令负责制作一些对象，定义标题，如何排序头的，以及是否可以按照该列进行排序。这是我在定义更换第一次尝试＆LT;表＆gt; ，但它是在一个完全神秘的方式失败：

where the directive takes care of making the header from some object that defines titles, how to sort, and whether you can sort by that column. Here is my first attempt at defining a replacement for <table>, but it is failing in a completely mystifying way:

<script>
angular.module('app',[])
.controller('ctrl', function($scope) {
    $scope.thingList = [{a: 'testa', b:'testb'}, {a: 'testa2', b: 'testb2'}, {a:'testa3', b: 'testb3'}];
})
.directive('sortable', function() {
    return {
        restrict: 'E',
        transclude: true,
        compile: function(elem, attrs) {
            return {
                pre: function(scope, elem, attrs) {
                    console.log('pre html: '+elem.html());
                },
                post: function(scope, elem, attrs) {
                    console.log('post html: '+elem.html());
                }
            }
        },
        template: '<table><ng-transclude></ng-transclude></table>',
    }
});
</script>
<div ng-controller="ctrl">
<sortable>
        <tr ng-repeat="thing in thingList">
            <td><span ng-bind="thing.a"></span></td>
            <td><span ng-bind="thing.b"></span></td>
        </tr>
</sortable>
</div>

有没有在网页上呈现的就是和控制台包含

There is nothing rendered in the webpage, and the console contains

pre html: <ng-transclude></ng-transclude><table></table>
post html: <ng-transclude>

            <span ng-bind="thing.a" class="ng-binding ng-scope"></span>
            <span ng-bind="thing.b" class="ng-binding ng-scope"></span>

</ng-transclude><table></table>

（Plunker 这里。）

为什么把＆LT; NG-transclude＆GT; 标记之前，外＆LT;表＆gt; 标签在pre-Link功能？！？什么是表与div的在样品code为 ngTransclude ??

Why is it putting the <ng-transclude> tags BEFORE and OUTSIDE the <table> tag in the pre-link function?!? What is different with tables vs. divs in the sample code for ngTransclude??

推荐答案

TR 标记成为无效如果它不'T缠上表标记。如果你想工作，你需要包装的 TR 与元素表标记。

tr tag becomes invalid if it doesn't wrap with table tag. If you wanted to work you need to wrap those tr element with table tag.

标记

<sortable>
  <table>
    <tr ng-repeat="thing in thingList">
      <td><span ng-bind="thing.a"></span></td>
      <td><span ng-bind="thing.b"></span></td>
    </tr>
  </table>
</sortable>

你也已经把 NG-transclude 标记中的表标签指令模板内。同时还将导致无效的HTML结构，和放大器;这不会得到由HTML解析器解析。

Also inside a directive template you have placed ng-transclude tag in the table tag. which would again cause the invalid html structure, & that wouldn't get parsed by HTML parser.

在表标记你只能有 TBODY ，表， TR ， THEAD ， TFOOT 。如果包括其他的上述表标记中提到的元素标签，这些将抛出表标签。

Inside the table tag you could only have tbody, table, tr, thead, tfoot. If you include the element tag other that the above mentioned inside table tag, those will thrown out of table tag.

template: '<table ng-transclude></table>',

您可以有使用 TD内的所有标签的​​独立性 / 个标记。

You could have independance of using all the tag inside the td/th tag.

例如：

<table>
   <div>Test Tag Which will thrown out of the table</div>
<table>

这将呈现为

<div>Test Tag Which will thrown out of the table</div>
<table>
</table>

当您放置同样的事情发生＆LT; NG-transclude＆GT;＆LT; / NG-transclude＆GT; 表中的标记。

Same thing happens when you placed <ng-transclude></ng-transclude> in table tag.

演示Plunkr

这篇关于角transclusion与表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！