Проблема со строками таблицы Angular Directive

Я начинающий программист 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 ВНУТРИ элемента tr-row, но нет таблицы для их отображения. Я знаю, что это означает, что я близок, но я не могу придумать какие-либо новые комбинации, чтобы попробовать.

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

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


javascript angularjs angularjs-directive angularjs-ng-repeat
person Tracy Lauren    schedule 01.09.2013    source источник

Ответы (2)


arrow_upward
40
arrow_downward

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

person Murat Çorlu    schedule 01.09.2013
comment
это самый простой ответ, и прямо в точку. работает отлично. большое спасибо! - person Tracy Lauren; 02.09.2013
comment
Итак, вы можете нажать галочку слева, чтобы установить это как ответ. Спасибо и добро пожаловать в stackoverflow :) - person Murat Çorlu; 02.09.2013
comment
Не знаю, что изменилось, но пример скрипки не показывает никаких данных в таблице. - person jorrebor; 30.01.2015
comment
@Murat Corlu, у вас могут быть имена тегов, содержащие символы тире, пожалуйста, посмотрите эту скрипку - jsfiddle.net/Heartless141 /u00351mk/1 - person ; 07.04.2015
comment
@Murat Corlu в контексте AngularJS docs.angularjs.org/guide/directive#directive- типы - person ; 07.04.2015

arrow_upward
17
arrow_downward

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

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

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

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

person Icycool    schedule 27.10.2016