Javascript 从嵌套指令调用控制器中的函数

我有两个嵌套指令用于在Angular中构建树视图：

父指令：

myApp.directive('nodes', function() {
    return {
        restrict: "E",
        replace: true,
        scope: {
            nodes: '='
        },
        template: "<ul><node ng-repeat='node in nodes' node='node'></node></ul>"

    }
});

myApp.directive('node', function($compile) {
        return {
            restrict: "E",
            replace: true,
            scope: {
                node: '='
            },
            template: "<li>{{node.ObjectName}}</li>",
            link: function(scope, element, attrs) {
                if (angular.isArray(scope.node.Children)) {

                    element.append("<nodes nodes='node.Children'></nodes>");

                    $compile('<nodes nodes="node.Children"></nodes>')(scope, function(cloned, scope) {

                        element.append(cloned);
                    });
                }
            }
        }
    });

function myController($scope, DataService) {
        $scope.init = function() {

            DataService.getData(0, 0).then(function(data) {
                $scope.treeNodes = $.parseJSON(data.d);
            });
        }

        $scope.focusNode = function(prmNode) {
            console.log(prmNode);
        }

    }

<div ng-app="testTree" ng-controller="myController">
        <div ng-init="init()">
            <nodes nodes='treeNodes'></nodes>
        </div>
    </div>

HTML:

myApp.directive('nodes', function() {
    return {
        restrict: "E",
        replace: true,
        scope: {
            nodes: '='
        },
        template: "<ul><node ng-repeat='node in nodes' node='node'></node></ul>"

    }
});

myApp.directive('node', function($compile) {
        return {
            restrict: "E",
            replace: true,
            scope: {
                node: '='
            },
            template: "<li>{{node.ObjectName}}</li>",
            link: function(scope, element, attrs) {
                if (angular.isArray(scope.node.Children)) {

                    element.append("<nodes nodes='node.Children'></nodes>");

                    $compile('<nodes nodes="node.Children"></nodes>')(scope, function(cloned, scope) {

                        element.append(cloned);
                    });
                }
            }
        }
    });

function myController($scope, DataService) {
        $scope.init = function() {

            DataService.getData(0, 0).then(function(data) {
                $scope.treeNodes = $.parseJSON(data.d);
            });
        }

        $scope.focusNode = function(prmNode) {
            console.log(prmNode);
        }

    }

<div ng-app="testTree" ng-controller="myController">
        <div ng-init="init()">
            <nodes nodes='treeNodes'></nodes>
        </div>
    </div>

---

我的问题是如何实现单击将在控制器中调用“focusNode”函数的

Javascript

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

myApp.directive('nodes', function() {
    return {
        restrict: "E",
        replace: true,
        scope: {
            nodes: '=',
            clickFn: '&'
        },
        template: "<ul><node ng-repeat='node in nodes' node='node' click-fn='clickFn()'></node></ul>"
    }
});


myApp.directive('node', function($compile) {
    return {
        restrict: "E",
        replace: true,
        scope: {
            node: '=',
            clickFn: '&'
        },
        template: "<li><span ng-click='clickFn()(node)'>{{node.ObjectName}}</span></li>",
        link: function(scope, element, attrs) {
            if (angular.isArray(scope.node.Children)) {

                element.append("<nodes nodes='node.Children' click-fn='clickFn()'></nodes>");

                $compile('<nodes nodes="node.Children" click-fn="clickFn()"></nodes>')(scope, function(cloned, scope) {

                    element.append(cloned);
                });
            }
        }
    }
});

function myController($scope) {
  $scope.focusNode = function(prmNode) {
      console.log(prmNode);
  }

  $scope.root = {
    ObjectName: 'Root',
    Children:[{
      ObjectName: 'A',
      Children: [{
        ObjectName: 'B'
      }, {
        ObjectName: 'C'
      }]
    }]
  };
}

var myApp=angular.module（'myApp'，[]）；
myApp.directive（'nodes'，function（）{
返回{
限制：“E”，
替换：正确，
范围：{
节点：'='，
单击fn:“&”
},
模板：“
”
}
});
myApp.directive（'node'，function（$compile）{
返回{
限制：“E”，
替换：正确，
范围：{
节点：'='，
单击fn:“&”
},
模板：“
{{node.ObjectName}
”，
链接：函数（范围、元素、属性）{
if（angular.isArray（scope.node.Children））{
元素。追加（“”）；
$compile（“”）（范围，函数（克隆，范围）{
元素。追加（克隆）；
});
}
}
}
});
函数myController（$scope）{
$scope.focusNode=函数（prmNode）{
console.log（prmNode）；
}
$scope.root={
ObjectName:'根'，
儿童：[{
ObjectName:'A'，
儿童：[{
ObjectName:'B'
}, {
ObjectName:'C'
}]
}]
};
}

HTML

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.8" src="http://code.angularjs.org/1.2.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app='myApp' ng-controller="myController">
    <node node="root" click-fn="focusNode"></node>
  </body>

</html>

---

因为我在获得50个代表信用证之前无法发表评论：（

我只是想补充一点，我在尝试上面W.L.Jared共享的plunkr时也遇到了一个错误。为了修复这个错误，我将控制器从一个全局函数更改为：

angular.module('myApp').controller('myController', function($scope){...})

错误消失了

---

回答很好：）正是我想要的。

你能发布html部分吗？@MaximShoustin，我添加了我的html部分。我得到了一个错误：“Object#没有“on”方法”。错误来自于这一行：

这个plunkr对你有用吗？它不会显示错误，但当我单击span.wird时，它不会写入控制台。您使用的是什么操作系统/浏览器？适用于我的Mac Maverick和Chrome上的Windows Server 2008 R2。从jQuery 1.4.4更新到1.7+后，错误消失了。谢谢