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 INSIDE элемента tr-row, но нет таблицы для их отображения. Я знаю, что это означает, что я близок, но я не могу придумать какие-либо новые комбинации, чтобы попробовать.

Мне просто нужна простая таблица со строками.

Я утверждаю, что если это было задано в миллион раз, я, кажется, не уверен, что искать. Я пробовал так много всего.

Ответ 1

Во-первых, имя тега не может содержать тире char. Поэтому вы не можете использовать 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/

Ответ 2

На самом деле эта проблема специфична для элементов <table>.

Механизмы синтаксического анализа браузеров не любят недопустимые теги внутри <table>, поэтому они попытаются выкинуть вашу директиву из таблицы (вы можете увидеть это, проверив элемент), прежде чем ваша директива получит возможность заменить себя действительным элементы. Это применимо, даже если ваша директива не содержит тире в имени.

Способ решения этого вопроса будет использовать директивный тип A вместо типа E, который предлагается @MuratCorlu.

Для других элементов, таких как <div>, вы можете в значительной степени заменить его на пользовательские теги с именами, содержащими тире. Например, ng-repeat может использоваться как тег.