Рекурсивно вставляя директивы angularjs

У меня возникла проблема в моем приложении, где я хотел бы иметь директиву, и внутри его шаблона он должен условно решить, следует ли рекурсивно отображать ту же директиву внутри нее. Я попытался воссоздать его, и этот пример также не работает. Директива не отображается и без ошибок. Я мог бы сделать другую ошибку.Рекурсивно вставляя директивы angularjs

https://plnkr.co/edit/PhDvLZyWvyFThg57qZDV?p=preview

index.html

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-app="app" ng-controller="MainCtrl"> 
    <ul class="nav navbar-nav"> 
     <li ng-repeat="menu in menus"> 
     <button class="btn btn-default dropdown-toggle" type="button"> 
      <span ng-bind="menu.Text"></span> 
      <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu" role="menu"> 
      <li menu-entry menus="menu.SubMenus"></li> 
     </ul> 
     </li> 
    </ul> 
    </body> 

</html>

меню entry.html

<li ng-repeat="menu in menus"> 
    <a ng-if="menu.Submenus.length===0" ng-bind="menu.Text"></a> 
    <button ng-if="menu.Submenus.length>0" type="button" ng-bind="menu.Text"> 
     <span class="caret caret-right"></span> 
    </button> 
    <ul ng-if="menu.Submenus.length>0" class="dropdown-menu" role="menu"> 
     <li menu-entry menus="menu.SubMenus"></li> 
    </ul> 
</li>

script.js

var app = angular.module('app', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.menus = [ 
    { Text: '1', SubMenus: [ 
     { Text: '1.1', SubMenus: [{Text:'1.1.1',SubMenus:[]},{Text:'1.1.2',SubMenus:[]},{Text:'1.1.3',SubMenus:[]}]}, 
     { Text: '1.2', SubMenus: [{Text:'1.2.1',SubMenus:[]},{Text:'1.2.2',SubMenus:[]},{Text:'1.2.3',SubMenus:[]}]}, 
     { Text: '1.3', SubMenus: [{Text:'1.3.1',SubMenus:[]},{Text:'1.3.2',SubMenus:[]},{Text:'1.3.3',SubMenus:[]}]} 
     ]}, 
    { Text: '2', SubMenus: [ 
    { Text: '2.1', SubMenus: [{Text:'2.1.1',SubMenus:[]},{Text:'2.1.2',SubMenus:[]},{Text:'2.1.3',SubMenus:[]}]}, 
    { Text: '2.2', SubMenus: [{Text:'2.2.1',SubMenus:[]},{Text:'2.2.2',SubMenus:[]},{Text:'2.2.3',SubMenus:[]}]}, 
    { Text: '2.3', SubMenus: [{Text:'2.3.1',SubMenus:[]},{Text:'2.3.2',SubMenus:[]},{Text:'2.3.3',SubMenus:[]}]} 
    ]}, 
    ]; 
}); 

app.directive('menuEntry', function() { 
     var cFn = ['$scope', function ($scope) { 

     }]; 

     var lFn = function (scope, element, attr, ctrl, transclude) { 
     }; 

     return { 
      restrict: 'A', 
      replace: true, 
      templateUrl: 'menu-entry.html', 
      controller: cFn, 
      link: lFn, 
      scope: { 
       menus: '=' 
      } 
     }; 
});

источник

2016-03-21 tic

В основном существует 3 проблемы с вашей текущей директивой.

Проблема в том, вы имели директиву li элемента с replace: true который добавляет один шаблон, который имеет ul снова. Таким образом, итоговый html был неверным в формате, так как вы не можете снова ul внутри ul. Изменение вы директивы replace: true к replace: false ** ИЛИ просто удалить эту опцию. **
Там на шаблоне директивы menu.Submenus должны быть menu.SubMenus

Шаблон

<li ng-repeat="menu in menus"> 
    {{menu.Text}} 
    <a ng-if="menu.SubMenus.length == 0" ng-bind="menu.Text"></a> 
    <button ng-if="menu.Submenus.length>0" type="button" ng-bind="menu.Text"> 
     <span class="caret caret-right"></span> 
    </button> 
    <ul ng-if="menu.SubMenus.length>0" class="dropdown-menu" role="menu"> 
     <li menu-entry menus="menu.SubMenus"></li> 
    </ul> 
</li>

Demo Plunkr

источник

2016-03-21 17:53:26

Эй. Спасибо за ответ. Однако рекурсивные меню не отображаются. Нет 1.1.1, 1.2.1, 1.3.1 и т. Д. – tic

@tic многократные опечатки .. посмотрите на обновленный ответ –

Очень ценится. Теперь мне нужно выяснить, могу ли я понять, что было не так в моей реальной программе, поскольку теперь я могу видеть, что с момента обновления до «SubMenus» он работает как минимум. 'length' был правильным в моем исходном коде, и' replace: true' работает, иначе у вас есть li внутри li – tic

Эта проблема опечатка: Подменю -> SubMenus

Вы определили объекты script.js с SubMenus, но ссылаетесь в своем шаблоне на подменю.

источник

2016-03-21 18:04:15 user967710

Спасибо, ребята. Иногда это маленькие глупые вещи – tic

не нужно добавлять ответ снова..а его уже покрыто 10+ минут назад .. –

Рекурсивно вставляя директивы angularjs

ответ

Смежные вопросы