web-dev-qa-db-ja.com

Angularディレクティブテーブルの行の問題

私は初心者ですAngularプログラマーですが、ディレクティブの理解に非常に近いです。

ここでフィドル を作成しましたが、これまでフィドルを使用したことがなく、レンダリングが完全ではありません...

tr-rowはディレクティブです。データをループして、レコードごとにディレクティブ（行）を出力しようとしています。 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がありますが、それらを表示するテーブルがありません。これは私が近くにいることを意味しますが、新しい組み合わせを試すことは考えられません。

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

これが何百万回も聞かれたことをお詫びします。何を検索すればよいかわからないようです。私はたくさんのことを試みました。

javascriptangularjsangularjs-directiveangularjs-ng-repeat
16
Tracy Lauren

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

38
Murat Çorlu

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

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

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

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

15
Icycool