Angularjs 表作为父对象，theader和tbody作为子对象的角度指令

我正在尝试用两个子指令执行一个父指令。 这样做的主要原因是强制应用程序中的所有表使用相同的“模板”

这里的问题是我需要在指令中复制Dom。 我的主要指令是table指令，第一个子指令是thead，第二个子指令是tbody

这是标记

<div my-table >
  <my-thead>
      <tr>
          <th ng-click="alert('Id')"> Id </th>
          <th ng-click="alert('Name')"> Name </th>
      </tr>
  </my-thead>
  <my-tbody>
      <tr ng-repeat ="item in List">
          <td>{{item.Id}}</td>
          <td>{{item.Name}}</td>
      </tr>
  </my-tbody>
</div>

更新

我从另一个角度重新创建了这个问题。但是主体没有被范围中的信息填充。列表，有什么想法吗

<div my-table>
<table>
    <thead>
        <tr>
            <th ng-click="resort('Id')"> Id </th>
            <th ng-click="resort('Name')"> Name </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="user in List">
            <td>{{user.Id}}</td>
            <td>{{user.Name}}</td>
        </tr>
    </tbody>
</table>
</div>

身份证件
名称
{{user.Id}
{{user.Name}

我的桌子

angular
.module('App')
.directive('myTable', ['$compile',
  function($compile){
    var tableSettings = {};
      return {
        restriction :'AE',
        scope : {},
        replace : false,
        link : function(scope,element){
        var divContainerFluid = angular.element('<div>');
        var divRowTable = angular.element('<div>');
        var divColTable = angular.element('<div>');

        divContainerFluid.addClass('container-fluid');
        divRowTable.addClass('Row');
        divColTable.addClass('col-lg-12');

        var divTable = angular.element('<div>');
        var table = angular.element('<table>');

        table.addClass('table');
        table.addClass('table-striped');

        //add from thead
        table.append(tableSettings.tHead);
        //add from tbody
        table.append(tableSettings.tBody);

        divTable.append(table);

        divColTable.append(divTable);

        divRowTable.append(divColTable);

        divContainerFluid.append(divRowTable);

        $compile(divContainerFluid)(scope);

        element.append(divContainerFluid);
      },
      controller: function () {

        this.receiveTHead = function (tHead) {
          tableSettings.tHead = tHead;
        }

        this.receiveTBody = function (tBody) {
          tableSettings.tBody = tBody;
        }
      }
    }
 }]);

angular
.module('App')
.directive('myTable', [
    '$compile',
    function($compile) {
        return {
            restriction: 'AE',
            //scope: {
            //    plEmptytext: '@'
            //},
            transclude: true,
            template:
                '<div class="container-fluid">' +
                    '<div class="row">' +
                    '<div class="col-lg-12">' +
                    '<div ng-transclude></div>' +
                    '</div>' +
                    '</div>' +
                    '</div>',
            link: function(scope, element) {

                var table = element.find('table');

                table.addClass('table');
                table.addClass('table-striped');

                var tHead = element.find('thead');

                var tBody = element.find('tbody');
                tBody.attr('ng-controller', 'listCtrl');

                $compile(tHead)(scope);
                $compile(tBody)(scope);
                $compile(table)(scope);

            }
        };
    }
]);

angular
.module（'应用程序'）
.指令（'myTable'[
“$compile”，
函数（$compile）{
返回{
限制：“AE”，
//范围：{
//plEmptytext:“@”
//},
是的，
模板：
'' +
'' +
'' +
'' +
'' +
'' +
'',
链接：功能（范围、元素）{
var table=element.find（'table'）；
table.addClass（“table”）；
table.addClass（'table-striped'）；
var tHead=element.find（'tHead'）；
var tBody=element.find（'tBody'）；
tBody.attr（'ng-controller'，'listCtrl'）；
$compile（tHead）（范围）；
$compile（tBody）（范围）；
美元（表）（范围）；
}
};
}
]);

listCtrl是相同的

解决方案：

---

对于可能来到这里的人，我的解决方案必须添加到指令tBody

return{controller:'listCtrl'…

中，这可能仍然提供您想要的“一个模板供所有人使用”目标是编写一个html模板文件，并通过声明

ng include

在使用表时引用它。与旧的服务器端include类似，它提供了一种随时随地注入html块的方法，而无需指令的所有开销

事实上，我们已经不再做那么多指令，而是在指令中没有任何工作要做的时候开始使用include more

听起来你需要一个“多槽转换”

这在大于1.5的角度版本中可用

---

对于可能来这里的人，我的解决方案必须添加到指令tBody中

return{ controller: 'listCtrl' ...

---

对我来说，这是我一直在寻找的解决方案。

设置asside您是如何解决这个问题的，我想澄清您试图实现的目标：您想创建一个表指令，该指令接受一个数组并构建一个表1。为了便于使用和2。因此，您项目中的所有表看起来都一样？@SeanLarkin是的，这就是我想要的。我cre在一个listCtrl中吃了一个假，我将用这个listCtrl更新这个问题。这是我从我正在开发的代码中提取的一个片段，现在这个列表将是将工厂注入这个目录的结果，所以我可以给出工厂的名称，并使用它用来自API的ajax请求填充表，是的在所有的项目中，所有的表看起来都是一样的，我只需要给出我想要显示的列的名称和获取数据的工厂名称。但是你描述的正确。使用

ng Transclude

，它将处理innerHTML。这不是一个坏方法，但是，我不想用html模板来实现这一点。我需要angular不负责结构的所有创建。@JoseRocha您仍然可以在ng的HTML中使用普通angular指令，如ng repeat等。它不仅限于HTML，它只是一个您注入的视图节，与指令不同，它没有自己的作用域，而是使用它是从中包含的。建议仔细查看。

<div my-table>
<table>
    <thead>
        <tr>
            <th ng-click="resort('Id')"> Id </th>
            <th ng-click="resort('Name')"> Name </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="user in List">
            <td>{{user.Id}}</td>
            <td>{{user.Name}}</td>
        </tr>
    </tbody>
</table>
</div>

angular
.module('App')
.directive('myTable', [
    '$compile',
    function($compile) {
        return {
            restriction: 'AE',
            //scope: {
            //    plEmptytext: '@'
            //},
            transclude: true,
            template:
                '<div class="container-fluid">' +
                    '<div class="row">' +
                    '<div class="col-lg-12">' +
                    '<div ng-transclude></div>' +
                    '</div>' +
                    '</div>' +
                    '</div>',
            link: function(scope, element) {

                var table = element.find('table');

                table.addClass('table');
                table.addClass('table-striped');

                var tHead = element.find('thead');

                var tBody = element.find('tbody');
                tBody.attr('ng-controller', 'listCtrl');

                $compile(tHead)(scope);
                $compile(tBody)(scope);
                $compile(table)(scope);

            }
        };
    }
]);

return{ controller: 'listCtrl' ...