Рекурсивная директива AngularJS с событием click и $ http get - PullRequest
Новая
       6

Рекурсивная директива AngularJS с событием click и $ http get

0 голосов
/ 09 июня 2018

Я новичок в angular.js, и мне нужно создать приложение, которое отображает таблицу содержимого во вложенных выпадающих списках (например, пользователь нажимает на ссылку, чтобы просмотреть подразделы в главах, а затем может углубляться и углубляться).Так как моя таблица содержания слишком велика для одновременной загрузки, я хочу, чтобы каждый список подразделов загружался только после того, как пользователь нажмет на родительскую главу.

Я попал в точку, где я могу отобразить главы lvl2 посленажав на главу lvl1 (как и ожидалось).Однако, как только я нажимаю на главу 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>
...