角度指令テーブルの行の問題

Question

私は初心者ですが、角度プログラマですが、私は実際に指令を理解するのにはとても近くています。

私はfiddle hereを作成するが、私は前にバイオリンを使用したことがない、それはかなりTR-行はディレクティブです...

をレンダリングされていません。私は、データをループし、レコードごとにディレクティブ（行）を印刷しようとしています。 HTML：

<table ng-controller="fiddleCtrl"> 
    <thead> 
     <th>id</th> 
     <th>name</th> 
     <th>description</th> 
    </thead> 
    <tbody> 
    <tr><tr-row ng-repeat="d in data" scdata="d"></tr-row></tr> 
    </tbody> 
</table> 

のjavascript：

var myapp = angular.module('myApp', []) 
.controller('fiddleCtrl', ['$scope', function ($scope) { 

$scope.data = [ 
    { id: 1, name: 'Fred', description: 'not the best worker' }, 
    { id: 2, name: 'Wilma', description: 'Freds Wife'}, 
    { id: 3, name: 'Barney', description: 'Freds best friend'}, 
    { id: 4, name: 'Louise', description: 'Never heard of Fred'}, 
    { id: 5, name: 'Tracy', description: 'Some Chick'}, 
    { id: 6, name: 'Foo', description: 'Inventer of bar'} 
]; 
}]).directive('trRow', function ($compile) { 
return { 
    restrict: "E", 
    replace: true, 
    link: function (scope, element, attrs) { 
     scope.id = scope.d.id; 
     scope.name = scope.d.name; 
     scope.desc = scope.d.description; 

     var tmpl = '<tr ><td>{{id}}</td><td><strong>{{name}}</strong></td><td>{{desc}}</td></tr>'; 
     element.html(tmpl).show(); 
     //var e =$compile(tmpl)(scope); 
     //element.replaceWith(e); 
     var e = $compile(element.contents())(scope); 
    }, 
    scope: { 
     d: "=" 
    } 
}; 
}); 

は簡単にする必要があります。 （le sigh）

私は本当にこれを理解する必要があります。

私のコードで起こっているのは、tr-rowディレクティブがテーブルを置き換えることです。私はそれらのリスト、 を持っています（tr行の要素のINSIDEがありますが、それらを表示するテーブルはありません）これは私が近くにいることを知っていますが、試してみるために新しい組み合わせを考えることはできません。

私はちょうどそれの行を持つ単純なテーブルを必要としています。

これは万回を尋ね、私が検索するためにどのようなわからないように思われている場合。私はたくさんのことを試してみました。

Answer 1

まず私はappologiseタグ名にはダッシュ文字を含めることはできません。tr-rowはタグ名として使用できませんが、属性として使用できます。

すると、あなたは、単にそのようなディレクティブを記述することができます。

.directive('trRow', function() { 

    return { 
     template: '<tr><td ng-bind="row.id"></td><td><strong ng-bind="row.name"></strong></td><td ng-bind="row.description"></td></tr>' 
    }; 
}); 

と使用方法は、そのようなものです：

<tbody> 
    <tr tr-row ng-repeat="row in data"></tr> 
</tbody> 

フィドルでの作業例：http://jsfiddle.net/T7k83/85/

Answer 2

実はこの問題は<table>に固有のものです要素。

ブラウザ解析エンジンでは、<table>内の無効なタグは好きではないため、ディレクティブが有効な要素で置き換えられる前に、ディレクティブをテーブルからスローしようとします（要素を調べることで確認できます） 。これは、ディレクティブに名前にダッシュが含まれていない場合でも適用されます。

この問題を解決するには、Eの代わりにAというディレクティブタイプを使用します。これは、@ MuratCorluによって提案されています。

<div>のような要素の場合、ダッシュを含む名前のカスタムタグで置き換えることができます。例えば、ng-repeatをタグとして使用できます。