Verschachteln angularjs Direktiven rekursiv

Ich habe ein Problem in meiner Anwendung, wo ich eine Direktive haben möchte, und innerhalb seiner Vorlage sollte es bedingt entscheiden, ob es die selbe Direktive rekursiv wiedergibt. Ich habe versucht, es neu zu erstellen, und dieses Beispiel funktioniert auch nicht. Die Direktive wird nicht gerendert und ohne Fehler. Ich hätte jedoch einen anderen Fehler machen können.Verschachteln angularjs Direktiven rekursiv

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>

Menü-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: '=' 
      } 
     }; 
});

Quelle

2016-03-21 tic

Grundsätzlich gibt es 3 Probleme mit Ihrer aktuellen Direktivenimplementierung.

Das Problem ist, dass Sie Richtlinie über li Element mit replace: true hatte, die eine Vorlage fügt die ul wieder hat. Der resultierende HTML-Code war im Format falsch, da Sie ul innerhalb ul nicht wieder haben können. Sie replace: true zu replace: false ändern Direktive ** OR nur auf diese Option entfernen. **
Es auf Ihrer Richtlinie Vorlage sollte menu.Submenusmenu.SubMenus

Vorlage

<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

Quelle

2016-03-21 17:53:26

Hey. Danke für die Antwort. Die rekursiven Menüs werden jedoch nicht gerendert. Es gibt keine 1.1.1, 1.2.1, 1.3.1, etc. – tic

@tic mehrere Tippfehler .. siehe aktualisierte Antwort –

Sehr geschätzt. Ich muss nun sehen, ob ich herausfinden kann, was in meinem Programm falsch war, da ich jetzt sehe, dass es seit der Aktualisierung auf "SubMenus" zumindest funktioniert. 'length' war korrekt in meinem ursprünglichen Code, und' replace: true' funktioniert, sonst haben Sie ein li in einem li – tic

sein

Das Problem ist ein Tippfehler: Untermenüs -> SubMenus

Sie haben in script.js Objekte mit SubMenus definiert, aber Sie verweisen in Ihrer Vorlage auf Untermenüs.

Quelle

2016-03-21 18:04:15 user967710

Danke Jungs. Manchmal sind es kleine dumme Sachen – tic

keine Notwendigkeit, Antwort wieder hinzuzufügen .. als sein bereits vor 10+ min .. –

Verschachteln angularjs Direktiven rekursiv

Antwort

Verwandte Themen