Почему ng-repeat не работает внутри директивы - PullRequest
Новая
       2

Почему ng-repeat не работает внутри директивы

0 голосов
/ 18 декабря 2018

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

У меня есть директива, и я помещаю некоторый HTML-код в директиву, которая использует ng-repeat, в массив внутри области действия директивы.Проблема в том, что переменная цикла не определена, несмотря на то, что она повторяет количество элементов в массиве.

Я знаю это, потому что я печатаю элемент, в котором он находится в данный момент в цикле, и он печатает «undefined», но печатает это количество элементов в массиве.

Вот HTML: 

<!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 data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Branches</p>
   <ul>
    <showbranch>
      <tr>
        <th>
          Name
        </th>
      </tr>
      <tr ng-repeat="subBranch in subBranches"
      <td>
        {{ f(subBranch.label) }}
      </td>
      </showbranch>
  </ul>
  </body>

</html>

и app.js: 

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

app.controller('MainCtrl', function($scope) {
  treeBranch = function(){};
  $scope.branch = new treeBranch();
$scope.branch.label = "Main Branch";

var subBranch1 = new treeBranch(); subBranch1.label = "branch 1";
var subBranch2 = new treeBranch(); subBranch2.label = "branch 2";
var subBranch3 = new treeBranch(); subBranch3.label = "branch 3";

$scope.branch.subBranches = [ subBranch1, subBranch2, subBranch3 ];

});

app.directive('showbranch',function(){
  return {
    restrict:'E',

    link:function(scope,element,attrs)
    {
      console.log("Attr: ", attrs);
      console.log(scope);
      scope.subBranches = scope.branch.subBranches;
      scope.f = function(e){
        console.log(e)
        return e
      }
    }
  }
})

Вот код кода: http://next.plnkr.co/edit/5uf6TcT0xqkl7TVe

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Элемент <tr> не повторяется, поскольку браузер удаляет неверный HTML, поскольку родительский элемент не является <table>.

. Решение состоит в том, чтобы добавить элемент <table>, чтобы сделать его действительным HTML: 

  <body ng-controller="MainCtrl">
    <p>Branches</p>
   <ul>
    <showbranch>
      <!-- ADD table ELEMENT HERE -->
      <table>
      <tr>
        <th>
          Name
        </th>
      </tr>
      <tr ng-repeat="subBranch in subBranches">
      <td>
        {{ f(subBranch.label) }}
      </td>
      </table>
      </showbranch>
  </ul>
  </body>

DEMO на PLNKR

0 голосов
/ 18 декабря 2018

Ваш HTML-код недействителен, поэтому вы не видите все элементы.

Внутри ul вы должны показывать элементы как элементы списка, а не как элементы tr, иначе будет отображаться только один дочерний элемент.

Тогда ваша логика не самая лучшаяв сознании angularjs.

Если у вас есть директива под названием showBranch, скорее всего, она должна отвечать за показ одной ветви, заданной в качестве параметра области.

И нет необходимости возвращать функции, чтобы сделать его динамическим, просто предоставьте его в качестве параметра области.

Итак, ваш пример может выглядеть примерно так: 

app.directive('showbranch',function(){
  return {
    restrict:'E',
    scope: {
      branch: '='
    },
    template: '<div>NAME: {{branch.label}}</div>'
  }
})

И 

<ul>
  <li ng-repeat="subBranch in branch.subBranches track by $index">
    <showbranch branch="subBranch" ></showbranch>
  </li>
</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...