Question

我是angular.js的新手，我必须创建一个在嵌套下拉列表中显示内容表的应用程序（例如，用户点击链接以查看章节下的子章节，然后可以越来越深入）。由于我的内容目录太大而无法一次加载，我希望只有在用户点击父章节后才能加载每个子章节列表。

在达到lvl1章节（如预期）后，我可以显示lvl2章节。但是，一旦我点击lvl2章节，我的日志会显示范围内出现的相应lvl3，然后再次调用日志并显示我点击之前的范围。

我找到了许多关于递归目录，点击事件和$ http获得的答案，但我无法弄清楚如何正确地组合这三件事。我已经在圈子里呆了好几天了。我很累，很沮丧。任何帮助将不胜感激。

这是我的（稍微简化）：

angular.module('app')
    .directive('entry', entryDirective)
    .directive('entries', entriesDirective)

function entryDirective($http) {
    var directive = {
        restrict: 'E',
        scope: {
            title: '@',
            id: '@'
        },
        link: link,
        template: '<a href="#">{{title}}</a><entries/>'
    }
    return directive;

    function link(scope, element, attrs) {
        element.on('click', function() {
            $http.get('modules/entries.xql?id=' + scope.id, { cache: false }).then(function(resp) {
                scope.entries = resp.data;;
            });
            console.log(scope);
        });
    };
}

function entriesDirective($compile) {
    var directive = {
        restrict: 'E',
        link: link
    }
    return directive;

    function link(scope, element, attrs) {
        var list = '<ul>' +
            '<li ng-repeat="entry in entries">' +
                '<entry id="{{entry.id}}" title="{{entry.title}}"/>' +
            '</li></ul>';
        var el = $compile(list)(scope);
        element.replaceWith(el);
    };
}

以下是HTML源代码。 $ ctrl.toc是由应用程序的另一部分设置的（工作正常）。

<ul class="nav">
      <li data-ng-repeat="entry in $ctrl.toc.content">
            <entry id="{{entry.id}}" title="{{entry.title}}"/>
      </li>
</ul>

输出：

<ul class="nav">
      <li data-ng-repeat="entry in $ctrl.toc.content" class="ng-scope">
           <entry id="1.7.2" title="Title 1" class="ng-isolate-scope">
               <a href="#" class="ng-binding">Title 1</a>
               <ul class="ng-scope">
                   <li ng-repeat="entry in entries.entry" class="ng-scope">
                       <entry id="1.7.2.6" title="Title 2" ng-hide="entry.link" class="ng-isolate-scope">
                           <a href="#" class="ng-binding">Title 2</a>
                           <ul class="ng-scope">
                           <!-- list items appear for a sec then dissappear -->
                           </ul>
                       </entry>
                   </li>
               </ul>
           </entry>
      </li>
</ul>

带有click事件和$ http get的AngularJS递归指令

0 个答案: