angularjs - ngClick 不会在递归模板中触发

Question

我开发了一个经典的递归菜单，它自己构建得很好。问题是 ngClick 永远不会从递归指令的元素中触发。
我知道这是一个范围问题，我尝试了很多配置但没有运气。

这是看它的 fiddle :http://jsfiddle.net/PM2dy/2/

要调用的函数是retrieveFiles(path)

和代码:

app.directive("mediaTree", function ($compile) {
    return {
        restrict: "E",
        scope: { folder: '=', retrieveFiles: '=' },
        template:
            '<ul>' +
                '<li data-ng-repeat="child in folder.Children">' +
                    '<a href="#" data-ng-click="retrieveFiles(child.Path)">{{child.Name}}</a>' +
                    '<media-tree folder="child"></media-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);
                });
            };
        }
    };
});


app.directive('mediaPanel', function ($compile) {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function (scope, elem, attrs) {
            scope.retrieveFiles = function (me) {
                console.log("thanks for calling " + me);
            }
            scope.folder = {
                Name: 'Media',
                Path: '/',
                Children: [
                    {
                        Name: 'Child1',
                        Path: '/Child1',
                        Children: [
                            {
                                Name: 'GrandChild1',
                                Path: '/Child1/GrandChild1',
                                Children: []
                            }
                        ]
                    },
                    {
                        Name: 'Child2',
                        Path: '/Child2',
                        Children: [
                            {
                                Name: 'GrandChild2',
                                Path: '/Child1/GrandChild2',
                                Children: []
                            }
                        ]
                    }
                ]
            };

            elem.append($compile("<media-tree class='media-tree' folder='folder'></media-tree>")(scope));            
        }
    }
});

Answer 1

我在这种情况下使用的方法是“需要父指令的 Controller ”。在 mediaTree指令，添加:

require: "^mediaPanel"

现在所有 mediaTree节点可以访问 mediaPanel的 Controller .写一个，暴露你想要调用的函数(注意:使用 this ，而不是 $scope ):

app.directive('mediaPanel', function ($compile) {
    ...
    controller: function($scope) {
        this.retrieveFiles = function(me) {
            console.log("thanks for calling " + me);
        };
    }
});

然后是 mediaTree的链接功能有权访问此 Controller 及其 retrieveFiles成员:

compile: function (tElement, tAttr) {
    ...
    return function (scope, iElement, iAttr, mediaPanel) {
        // call mediaPanel.retrieveFiles(x) from here, or put it in scope
    };
}

我采取了一些自由并重新安排了您的代码。一些编译并不是真正需要的，我将数据定义移动到顶级 Controller 等。请参阅重新安排和工作案例: http://jsfiddle.net/KRDEf/