Директива не отображается внутри ng-repeat

Question

Директива не отображается внутри ng-repeat

0

Директива test-dir не может выполнить

  <ul>
     <li ng-repeat="person in data">
        <table>
          <thead>{{person.name}}</thead>
          <tbody>
           <tr ng-repeat="row in person.entries">
             <test-dir data="row"></test-dir>
           </tr>
          </tbody>
        </table>
    </li>
  </ul>

app.directive("testDir", function(){
    return {
        restrict: 'EA',
        scope: {
          data: '='
        },
        template: "<td>{{data}}</td>"
    };
});

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

PLNKR: http://plnkr.co/edit/fraBDzt9kjZlUIuV1fDf?p=preview

runtimeZero 18 май 2016, в 22:15

Источник

0

Вы добавили ng-app в HTML?
dimpiax 18 май 2016, в 20:10
1

Очевидно, это работает, если вы переместите <td> </ td> из шаблона директивы plnkr.co/edit/VMq2PArcQeRaBcFiDagk?p=preview
Lisa Gagarina 18 май 2016, в 20:12

Теги:

angularjs

2 ответа

Ещё вопросы

Очевидно, это работает, если вы переместите <td> </ td> из шаблона директивы plnkr.co/edit/VMq2PArcQeRaBcFiDagk?p=preview

Daniel · Answer 1 · 2016-05-18T18-11-00.000Z

Во-первых, вам нужно добавить replace: true в директиву testDir.

В противном случае у вас будет <div> внутри <tr> поэтому директива не отображается при использовании в качестве элемента.

Однако даже при replace: true вы столкнетесь с известной ошибкой:

Error: Template must have exactly one root element. was: <td>{{data}}</td>

Лучше использовать директиву как attribute.

G4uKu3_Gaurav · Answer 2 · 2016-05-18T19-48-00.000Z

Просто используйте ng-repeat с директивой типа <test-dir ng-repeat="row in person.entries" data="row"></test-dir>

Таким образом, ваш код будет

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write("<base href=\"" + document.location + "\" />");</script>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
<script>
     var app = angular.module('plunker', []);
app.directive("testDir", function(){
    return {
        restrict: 'EA',
        scope: {
          data: '='
        },
        template: "<td>{{data}}</td>"
    };
});


app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.data = [
    {
      name: 'cars',
      entries: [
        {model: 'fiat', speed: 100 },
        {model: 'tesla', speed: 200 },
        ]
    },
    {
      name: 'trucks',
      entries: [
        {model: 'volvo', speed: 50 },
        {model: 'merc', speed: 75 },
        ]
    }
    ];

});
</script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <ul>
     <li ng-repeat="person in data">
        <table>
          <thead>{{person.name}}</thead>
          <tbody>
           <tr >
             <test-dir ng-repeat="row in person.entries" data="row"></test-dir>
           </tr>
          </tbody>
        </table>
    </li>
  </ul>




</body>
</html>

@OP - заменить template: "<td>{{data}}</td>" на template: "<td>{{data.model}}</td><td>{{data.speed}}</td>"
Как это создаст новые строки в таблице?