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中）是在我调用指令时插入的结果代码是strangly格式化的。我最终得到了;

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

这样我的嵌套指令就与table一起内联了。我已经尝试了一些可能存在问题的转换思想的排列，但我似乎无法解决这个问题。

我的指令代码是：

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 Rajkok似乎是正确的。对我来说，解决方案是将指令作为类或属性而不是元素来调用 - 这可以避免这个特定的问题。

模板内的嵌套指令位于顶部

1 个答案: