AngularJS:树指令工作不正常

创建一个具有独立作用域的angular tree指令，该指令绑定两个属性的值…items和item click handler。代码如下：

HTML

JAVASCRIPT

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

module.controller("TreeCtrl", function($scope) {
    $scope.treeFamily = [{
        Name : "Parent",
        Code : "Parent",
        Children: [{
            Name : "Child1",
            Code : "Child1",
            Children: [{
                Name : "Grandchild1",
                Code : "Grandchild1",
                Children: []
            },{
                Name : "Grandchild2",
                Code : "Grandchild2",
                Children: []
            },{
                Name : "Grandchild3",
                Code : "Grandchild3",
                Children: []
            }]
        }, {
            Name: "Child2",
            Code : "Child2",
            Children: []
        }]
    }];
    $scope.groupSelectedFunction = function (itemId) {
                alert(itemId + ' selected');
    }
});

module.directive("itemTree", function($compile) {
    return {
        restrict: "E",
        scope: {
            items: '=',
            itemClickHandler: '&'
        },
        template: 
            '<ul id="group-nodes" ng-repeat="item in items">' +                
                '<li id={{ item.Code }}>' + 
                    '<a ng-click="itemClickHandler({itemId: 1})">{{ item.Name }}</a>'+
                    '<item-tree items="item.Children" item-click-handler="itemClickHandler(itemId)"></item-tree>' +
                '</li>' +
            '</ul>',
        compile: function(tElement, tAttr) {
            var contents = tElement.contents().remove();
            var compiledContents;
            return function(scope, iElement, iAttr) {
                if(!compiledContents) {
                    compiledContents = $compile(contents);
                }
                compiledContents(scope, function(clone, scope) {
                         iElement.append(clone); 
                });
            };
        }
    };
});

var module=angular.module（'myapp'，[]）；
模块控制器（“TreeCtrl”，功能（$scope）{
$scope.treeFamily=[{
姓名：“家长”，
代码：“家长”，
儿童：[{
姓名：“Child1”，
代码：“Child1”，
儿童：[{
名称：“1”，
代码：“1”，
儿童：[]
},{
姓名:"孙女2",，
代码：“2”，
儿童：[]
},{
姓名:"孙女3",，
代码：“3”，
儿童：[]
}]
}, {
姓名：“Child2”，
代码：“Child2”，
儿童：[]
}]
}];
$scope.groupSelectedFunction=函数（itemId）{
警报（itemId+“选定”）；
}
});
module.directive（“itemTree”，函数（$compile）{
返回{
限制：“E”，
范围：{
项目：“=”，
itemClickHandler:“&”
},
模板：
“
”+
“
”+
“{item.Name}”+
'' +
“
”+
“
”，
编译：函数（远程通讯，tAttr）{
var contents=tElement.contents（）.remove（）；
var编译内容；
返回函数（范围、IELENT、iAttr）{
如果（！compiledContents）{
compiledContents=$compile（目录）；
}
compiledContents（范围，函数（克隆，范围）{
附加（克隆）；
});
};
}
};
});

---

这棵树长得很好。如果单击顶级父节点，控制器功能将运行并显示一个警报，该警报具有预期值：“已选择父节点”。但是，如果单击了任何其他节点，则该功能将运行，但警报消息为：“未定义选定”。相对新的角度，所以这一个让我抓挠我的头。非常感谢您的帮助。

不清楚每个子节点的警报中应该显示什么ID，但更明显的是，为什么您看到的是

未定义的
，而不是值

使用
&
隔离作用域类型时，从模板传递给函数的参数需要在对象中传递，顶级元素遵循该对象：

ng-click="itemClickHandler({itemId: 1})"

您需要为孩子们遵循相同的语法。所以

item-click-handler="itemClickHandler(itemId)"

应该是

item-click-handler="itemClickHandler({itemId: itemId})"


item-click-handler="itemClickHandler({itemId: itemId})"