在AngularJS中使用ng-repeat in指令时，未定义的值

Question

我有一个由javascript对象组成的数据结构，该对象定义了树菜单的[a]分支。它的一个属性是'subBranches'属性，可以用treeBranch类的其他实例填充。

有一个$作用域。branch = new treeBranch()，我已经添加并定义了3个其他treeBranch类的基本属性，并将它们作为数组添加到主分支中，例如

$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 ];

然后在我的控制器的容器中有一个html块，它定义了一个调用应该绘制subBranches的指令:

<ul>
    <showbranch ng-repeat="subBranch in branch.subBranches"></showbranch>
</ul>

问题是，无论我做什么，我似乎都看不到指令中的迭代器'subBranch'变量。我有一个范围:{'subBranch': '='}，我已经尝试在上面的标签中添加subBranch="subBranch"，但无论我尝试什么，当我进入指令(在链接代码中)并放弃控制台范围时，我看到subBranch属性，但它总是'未定义'。同时，模板实际上绘制了三次，所以它遍历了数组中的所有三个值。

我错过了什么?

西南编辑:

指令中没有什么花哨的。

listsApp.directive(
    'showtype',
    function() {
        return {
            restrict: 'EA',
            replace: true,
            scope: {
                subBranch : '='
            },
            templateUrl: 'showtype.html',
            link: function (scope, element, attrs) {
                console.log("showtype branch",scope);
            }
        }
    }
);

<script type="text/ng-template" id="showtype.html">
    <li>
        <span>{{subBranch.label}}</span>
    </li>
</script>

Answer 1

我相信你有两个不相关的问题。

首先，你已经在$作用域中添加了分支

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

当你的模板使用分支时

<ul>
  <showbranch ng-repeat="subBranch in branches.subBranches"></showbranch>
</ul>

所以，可能会改变你的html使用branch.subBranches .

你将遇到的第二个问题是，如果你正在用scope: { 'subBranch' : '=' }创建一个隔离作用域，你的指令实际上并不知道子分支。这可以通过在你的模板中添加一个指令期望的属性来解决。由于您的指令范围只有{ 'subBranch' : '=' }，因此需要将属性命名为sub-branch="…"。该指令会将虚线属性名映射为camelcase。

这可以很容易地添加到你的模板中:

<ul>
  <showbranch sub-branch="subBranch" ng-repeat="subBranch in branch.subBranches"></showbranch>
</ul>

Answer 2

你需要在指令中设置subBranch对象，如

  <showbranch ng-repeat="subBranch in branches.subBranches" subbranch="subBranch"></showbranch>

然后你可以在指令代码中访问它。

app.directive('showbranch',function(){
  return {
    restrict:'E',
    scope:{
      subbranch:'=subbranch',
    },
    link:function(scope,element,attrs)
    {
      console.log(scope.subbranch);
    }
  }
})

sample plnkr http://plnkr.co/edit/Xj0RhGOthBLrNcbYwHm2?p=preview

Answer 3

好的，属性的驼峰大小写是什么东西扔出来，使用连字符或没有驼峰大小写修复它。我的最终结果，一旦我得到了这个工作是再次重命名为分支的新指令，所以它可以以类似的方式处理前一级:

    <li>Types:
        <span class="glyphicon glyphicon-refresh" title="Refresh" style="margin-left:15px;" ng-click="loadTypes()"></span><img src="<?= $loadAnim; ?>" ng-show="types.loading">
        <ul class="nobutton">
            <showtype ng-repeat="subBranch in branch.subBranches" sub="subBranch"></showtype>
        </ul>
    </li>

然后在指令中:

listsApp.directive(
    'showtype',
    function() {
        return {
            restrict: 'EA',
            replace: true,
            scope: {
                branch : '=sub'
            },
            templateUrl: 'showtype.html',
            link: function (scope, element, attrs) {
                console.log("showtype branch",scope);
            }
        }
    }
);