Question

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

我有一个$ scope.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属性，但它总是“未定义”。同时，模板实际上绘制了三次，因此它迭代了数组中的所有三个值。

我错过了什么？

SW

修改

指令中没有什么花哨的东西。

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作为分支

添加了子分支

$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="…"。该指令将虚线属性名称映射到camelcase。

可以在模板中轻松添加：

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

Answer 2

您需要在指令中设置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 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

3 个答案: