Question

我正在尝试在AngularJS中做一些非常简单的事情，但似乎无法使其正常工作。

我有一个指令，并且在指令内放置了一些HTML，它们在指令范围内的数组上使用ng-repeat。问题在于，尽管迭代了数组中元素的数量，但循环变量仍未定义。

我知道这一点，因为我打印了循环中当前位于的元素，并且打印了“未定义”，但打印了数组中元素的数量。

这是html：

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
      }
    }
  }
})

和app.js：

{{1}}

这是代码的一大堆： http://next.plnkr.co/edit/5uf6TcT0xqkl7TVe

Answer 1

您的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>

Answer 2

<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 on PLNKR

为什么ng-repeat在指令内不起作用

2 个答案: