16

私は初心者の Angular プログラマーですが、ディレクティブをほぼ理解しています。

ここでフィドルを作成しますが、これまでフィドルを使用したことがなく、レンダリングがうまくいきません...

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: "="
    }
};
});

簡単なはずです。(ため息)

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

私のコードで起こっていることは、tr-row ディレクティブがテーブルを置き換えたことです。それらのリストを取得します ( tr-row 要素の tr INSIDE を使用しますが、それらを表示するテーブルはありません。これは近いことを意味することは知っていますが、試す新しい組み合わせは思いつきません。

行を含む単純なテーブルが必要です。

これが何百万回も尋ねられた場合は申し訳ありませんが、何を検索すればよいかわからないようです。私は非常に多くのことを試しました。

4

2 に答える 2

40

まず、タグ名にダッシュ文字を含めることはできません。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/

于 2013-09-01T16:58:28.203 に答える
17

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

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

これを解決する方法は、 @MuratCorlu によって提案されているtypeAの代わりにディレクティブ type を使用することです。E

などの他の要素については<div>、ダッシュを含む名前のカスタム タグに置き換えることができます。たとえばng-repeat、タグとして使用できます。

于 2016-10-27T04:41:49.100 に答える