2016-11-24 8 views
3

私は<tr><td>を含めたいと思っていますが、私はそれを指示で行うことはできません。 <td>または<td>が存在しないかのように無視し続けます。ここで私が達成しようとするものです。<tr>要素を角度指令(transclude)に含めるにはどうすればよいですか?

<my-table> 
    <tr> 
    <td>hello</td> 
    <td>world</td> 
    </tr> 
</my-table> 

ここではjavascriptのだ:

angular.module('app', []) 
.controller('Controller', ['$scope', function($scope) { 

}]) 
.directive('myTable', function() { 
    return { 
    restrict: 'E', 
    transclude: true, 
    templateUrl: 'my-table.html' 
    }; 
}); 

私-table.html:

<my-table class="ng-isolate-scope"><table ng-transclude=""> 

    hello <-- no <tr> nor <td> here just plain text 
    world 

</table></my-table> 

<table ng-transclude> 

</table> 

上記のコードは、以下のような結果に

例:PLUNKR

+0

これらの ''と '​​'は 'my-dialog-close.html'の中に置かれます。 –

+0

@RogerNgそれはまさに私が欲しくないものです。私はカスタマイズ可能な ''が欲しいですが、私はそれを私の指示に縛られたいです。 '

' – DennyHiu

+3

の代わりにそれをイメージすると、テーブルがないとhtmlが無効になります。これは、それが全部を集計したhtmlの – Deep

答えて

0

これは転写物の問題ではありません。テーブルがない<tr>は無効なので、無効なhtmlの問題です。したがって、角度はブラウザtextから取得され、DOM要素では取得されません。

link: function(scope,element,attrs,ctrls,transclude) { 
    var html = transclude(); 
    element.find('table').append(html[1].firstElementChild); 
    } 

<my-table> 
    <table> 
     <tr> 
     <td>hello</td> 
     <td>world</td> 
    </tr> 
    </table> 
    </my-table> 

は、その後、あなたがリンク機能でtr年代とともにブラウザによって作成されたtbody要素へのアクセスを取得し、それを処理できるようになります:だから、HTML内<table>タグを持っている必要があります

、またはテンプレートにng-transcludeを使用してください。しかし、私はあなたがトランスコードされた部分を後で再利用したいと思うかもしれないと推測しているかもしれません。

1

あなたはNG-trasclude

angular.module('app', []) 
    .controller('Controller', ['$scope', function($scope) { 

    }]) 
    .directive('myTable', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     scope: { 
     'close': '&onClose' 
     }, 
     templateUrl: 'my-dialog-close.html' 
    }; 
    }); 

テンプレート

index.htmlを

<my-table> 
    <table> 
    <tr> 
     <td>hello</td> 
     <td>world</td> 
    </tr> 
    </table> 
    </my-table> 
を使用するように弱々しい場合は、以前の私のコメントに追加、あなたはこの本のように多少似て達成することができます

プランカ:https://plnkr.co/edit/u85h0sJL50k2gESfI6RT?p=preview

関連する問題