angularjs - 模板内的嵌套指令放置在顶部

Question

我尝试创建的 angularjs 指令遇到问题。

主指令称为 tableu，它有一个 tableu-heading 和一个 tableu-body，两者都位于表格内，如下所示:

<table>
    <tableu-heading headings='data.format'>
    </tableu-heading>
    <tableu-body data='data'>
    </tableu-body>
</table>

问题是，在 Chrome 和 Firefox 中(但由于某种原因在 IE8 中除外)，当我调用该指令时插入的结果代码格式很奇怪。我最终得到；

<tableu>
    <tableu-heading>
    </tableu-heading>
    <tableu-body>
    <tableu-body>
    <table>
    </table>
</tableu>

这样我的嵌套指令就会与表内联放置。我尝试了一些可能是问题所在的嵌入思维排列，但我似乎无法解决该问题。

我的指令代码是:

angular.module('air.directives.tableu',[])

.directive('tableu', function () {
  return {
    restrict:'EA',
    scope: {
        data: '=',
    },
    templateUrl: 'template/tableu/tableu.html'
  };
})

.directive('tableuHeading',function() {
  return {
    restrict:'EA',
    replace: false,
    scope: {
        headings: '='
    },
    templateUrl: 'template/tableu/tableu-heading.html',
    compile: function compile(tElement, tAttrs, transclude) {


        return function link(scope, iElement, iAttrs) {

        }
    }
  };
})

.directive('tableuBody',function() {
  return {
    restrict:'EA',
    transclude: true,
    replace: false,
    templateUrl: 'template/tableu/tableu-body.html',
    compile: function compile(tElement, tAttrs, transclude) {


        return function link(scope, iElement, iAttrs) {

        }
    }
  };
})

您能提供的任何帮助将不胜感激 - 我不得不认为解决方案可能是显而易见的。

Answer 1

马克·拉吉科克 (Mark Rajcok) 似乎是正确的。对我来说，解决方案是将指令作为类或属性而不是元素来调用 - 这避免了这个特定的问题。