AngularJS：树指令无法正常工作答案

【问题标题】：AngularJS : tree directive not working properlyAngularJS：树指令无法正常工作
【发布时间】：2014-06-05 22:30:36
【问题描述】：

创建一个具有隔离范围的角度树指令，该指令绑定两个属性的值...项目和项目点击处理程序。代码如下：

HTML

<div ng-app="myapp">
<div ng-controller="TreeCtrl">
    <item-tree class="tree" items="treeFamily" item-click-handler="groupSelectedFunction(itemId)"></item-tree>
</div>

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

树建得很好。如果我单击顶级父节点，控制器功能将运行并显示带有预期值的警报：“Parent selected”。但是，如果单击任何其他节点，则该函数会运行，但警报消息是：“undefined selected”。 Angular 相对较新，所以这个让我摸不着头脑。将不胜感激。

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

【解决方案1】：

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

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

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

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

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

应该是

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

Demo

【讨论】：