4

私は古典的な再帰メニューを開発しましたが、それ自体はうまく構築されています。問題は、再帰ディレクティブの要素から ngClick が起動されないことです。私はそれがスコープの問題であることを知っており、多くの構成を試しましたが、うまくいきませんでした。

これはそれを見るためのフィドルです：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));            
        }
    }
});
4

1 に答える 1

3

そのような場合に私が使用する方法は、「親ディレクティブのコントローラーを要求する」です。mediaTreeディレクティブで、次を追加します。

require: "^mediaPanel"

これで、すべてのmediaTreeノードが のコントローラにアクセスできるようになりましたmediaPanel。呼び出したい関数を公開して、1 つ記述します (注: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
    };
}

私は自由を取って、あなたのコードを少し再配置しました。一部のコンパイルは実際には必要ありませんでした。データ定義をトップレベルのコントローラーなどに移動しました。再配置と作業ケースのフィドルを参照してください。

于 2013-10-16T11:27:46.763 に答える