Question

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

要调用的函数是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

我在这种情况下使用的方法是“父指令的要求控制器”。在mediaTree指令中，添加：

require: "^mediaPanel"

现在所有mediaTree个节点都可以访问mediaPanel的控制器。写一个，暴露你想要被调用的函数（注意：使用this，而不是$scope）：

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

然后mediaTree的链接功能可以访问此控制器及其retrieveFiles成员：

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

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

ng Click不会在递归模板中触发

1 个答案: