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

Question

我有一个数据结构，它由一个 javascript 对象组成，该对象定义了一个树状菜单的 [a] 分支。它的属性之一是 'subBranches' 属性可以用 treeBranch class.

的其他实例填充

我有一个 $scope.branch = new treeBranch()，我在其他 3 个 treeBranch classes 中添加和定义了基本属性，并将它们作为数组添加到主分支，例如

$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 块，它定义了一个调用应该绘制子分支的指令：

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

问题是，无论我做什么，我似乎都看不到指令中的迭代器 'subBranch' 变量。我有一个范围：{ 'subBranch' : '=' } 我尝试在上面的标签中添加 subBranch="subBranch" 但无论我尝试什么，当我进入指令时（在 link 代码）并删除作用域的控制台，我看到子分支属性但它始终是 'undefined'。同时，模板实际上绘制了三次，因此它遍历数组中的所有三个值。

我错过了什么？

西南

编辑：

指令中没有什么特别之处。

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

你需要像

一样在指令中设置subBranch obj

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

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

Answer 2

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

首先是您在 $scope 上添加了您的子分支作为分支

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

虽然您的模板使用分支

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

所以，可能会将您的 html 更改为使用 branch.subBranches。

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

这可以很容易地添加到您的模板中：

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

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

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

undefined value when using ng-repeat in directive with AngularJS

angularjs

angularjs-directive

ng-repeat

angularjs-ng-repeat