Question

我使用单个递归指令来创建嵌套树。到目前为止，该指令正在按照我的意愿运行，但是我遇到了让ngClick与我的指令合作的问题。我有一个函数将用于在树中切换类似手风琴的显示，但是ngClick只会作用于树的顶级集合，即使单击二级或三级插入符也是如此。

我按照此stackoverflow中的约定来点击注册（我之前遇到的问题），但现在我突然无法以正确的方式注册：ng-click doesn't work within the template of a directive

我的指示，

module.directive("navigation", function (ConfigurationService, NavigationService, $compile) {
            return {
                restrict: 'E',
                replace: true,
                scope: {
                    menu: '=',
                    selected: '=', //TODO: Update clicked node as selected node in NavController
                    nextData: '=', //TODO: Call to servers again to get next two levels
                    onClick: '&'
                },
                },
                controller: function($scope) {
                    $scope.toggleExpand = NavigationService.toggleExpand;
                },
                templateUrl: ConfigurationService.getConfiguration().baseUrl +
                "/modules/navigation/templates/navigation.html",
                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); 
                        });
                    };
                },
            }
        }
    ];

HTML模板

<ul style="list-style: none">
<li ng-repeat="node in menu.Folders">
    <i class="fa" ng-click="onClick({folder: node})" ng-class="{'fa-caret-right': node.expanded != true, 'fa-caret-down': node.expanded == true}"></i>
    <i class="fa fa-folder"></i>
    {{node.MnemonicTitle}}
    <navigation menu="node" on-click="toggleExpand(folder)"></navigation>
</li>
<li ng-repeat="node in menu.CurrentItems">
    Item: {{node.MnemonicTitle}}
</li>

功能，

toggleExpand = function (folder) {
                        if (!ObjectTool.has(folder, "expanded")) {
                            folder.expanded = false;
                        }

                        folder.expanded = !folder.expanded;
                    };

最后在我的索引中调用指令

<navigation class="nav tree" menu="applications[currentApplication].Menu" on-click="toggleExpand(folder)"></navigation>

有任何帮助吗？我知道这是一个范围问题和一个在这里被问过很多的问题，但我似乎找不到任何人只用一个指令创建了一个递归树而且我不知道Angular的深度足以弄明白我靠自己的方式。

解决

对html模板所做的更改

<ul style="list-style: none">
<li ng-repeat="node in menu.Folders">
    <i class="fa" ng-click="toggleExpand(node)" ng-class="{'fa-caret-right': node.expanded != true, 'fa-caret-down': node.expanded == true}"></i>
    <i class="fa fa-folder"></i>
    {{node.MnemonicTitle}}
    <navigation menu="node" on-click="toggleExpand(folder)"></navigation>
</li>
<li ng-repeat="node in menu.CurrentItems">
    Item: {{node.MnemonicTitle}}
</li>

ng单击“不通过递归树正确嵌套”

0 个答案: