7

これが私の指示です：

myapp.directive('envtable',  function () {
return {
    restrict: 'E',
    replace: true,
    transclude: true,
    template: '<table class="table" ng-transclude></table>'
};
});

これは私がhtmlでそれを使用する方法です（ブートストラップcssを使用）

<envtable>
    <tr>
      <td>OS</td>
      <td>{{env.osName}}</td>
    </tr>
    <tr>
      <td>OS Version</td>
      <td>{{env.osVersion}}</td>
    </tr>
  </envtable>

ただし、生成されたコードは chrome では次のようになります。

<table class="table" ng-transclude=""><span class="ng-scope ng-binding">

      OS
      Windows 8


      OS Version
      6.2

  </span></table>

ご覧のとおり、Angular はすべてのtr/tdタグを無視し、コンテンツを 1 つのスパン要素に配置しました。なぜこうなった？

ところで、実験として、タグpの代わりに envtable でトランスクルードされたタグだけを使用してみました。その場合、angularはタグにクラスをtr\td追加するだけです。では、なぜこれらの tr/td タグを台無しにするのでしょうか?ng-scopep

4

3 に答える 3

6

これはrestrict: 'A'

<table envtable>
    <tr>
        <td>OS</td>
        <td>{{env.osName}}</td>
    </tr>
    <tr>
        <td>OS Version</td>
        <td>{{env.osVersion}}</td>
    </tr>
</table>

Demo

于 2013-08-09T23:27:34.413 に答える
1

テーブル テンプレートに広告などの他の要素が含まれている場合に備えて、別の例を提供してください

プランカー

app.directive('envtable', function() {
  return {
    replace: true,
    transclude: true,
    template: '<table class="NewTable"><thead><th>Col1</th><th>Col2</th><th>Col3</th></thead></table>',
    link: function(scope, elem, attrs, controller, transcludeFn) {
      var item = transcludeFn(scope, function(clone) {
        return clone.children();
      });
      elem.append(item);
    }
  };
});


 <table envtable>
    <tbody>
      <tr ng-repeat='r in rows'>
        <td>{{r.col1}}</td>
        <td>{{r.col2}}</td>
        <td>{{r.col3}}</td>
      </tr>
    </tbody>
  </table>
于 2014-02-26T16:58:58.583 に答える
0

これは繰り返しになると思いますが、解決策は簡単です。<table>!の使用は避けてください。

タグを削除した場合、それらを's<table>に置き換えてスタイリングすると、問題なく動作するはずです。<div>display: table

于 2013-08-10T16:12:11.043 に答える