Директивата Angular не работи правилно в HTML таблица

Опитвам се да използвам директива AngularJS (1.2), за да създам клетки от ред вътре в HTML таблица и не разбирам защо Angular вмъква резултата от директивата като първо дете на „body“, вместо да замени оригиналния елемент на директива?

Ето HTML маркирането:

  <body ng-app="myApp" ng-controller="MainCtrl">
    <table>
      <thead>
        <tr>
          <th>col1</th>
          <th>col2</th>
          <th>col3</th>
          <th>col4</th>
        </tr>
      </thead>
      <tbody>
        <my-directive></my-directive>
      </tbody>
    </table>
  </body>

И директивата:

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.data = ['value1','value2','value3','value4'];
});

app.directive('myDirective', function () {
    return {
        restrict: "E",
        replace: true,
        scope:false,
        link: function (scope, element) {
            var html = angular.element('<tr></tr>');
            angular.forEach(scope.data, function(value, index) {
                html.append('<td>'+value+'</td>');
            });
            element.replaceWith(html);
        }            
    };
});

Моля, използвайте връзката Plunker по-долу, за да видите резултата: http://plnkr.co/edit/zc00RIUHWNYW36lY5rgv?p=preview


angularjs html-table directive
person rpatriarche    schedule 03.08.2014    source източник
comment
За да работи замяната, използвайте шаблон.   -  person pixelbits    schedule 03.08.2014
comment
Не винаги можем да използваме свойство на шаблон (моят код е опростен за примера). Освен това свойството replace работи добре с други тагове. Имам само проблема с html-таблицата.   -  person rpatriarche    schedule 03.08.2014
comment
Браузърите автоматично ще отхвърлят неподходящи или неочаквани тагове в таблиците. За да накарате вашата директива да работи, използвайте я като атрибут вместо елемент.   -  person link    schedule 03.08.2014

Отговори (1)


arrow_upward
5
arrow_downward

Изглежда, че работи по-добре, ако не ограничите директивата да бъде елемент:

app.directive('myDirective', function () {
    return {
        restrict: "A",
        replace: true,
        scope:false,
        link: function (scope, element) {
            var html = angular.element('<tr></tr>');
            angular.forEach(scope.data, function(value, index) {
                html.append('<td>'+value+'</td>');
            });
            element.replaceWith(html);
        }            
    };
});

<table>
  <thead>
    <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
      <th>col4</th>
    </tr>
  </thead>
  <tbody>
    <tr my-directive></tr>
  </tbody>
</table>

person Edminsson    schedule 03.08.2014