İç içe geçmiş angularjs yönergeleri yinelemeli olarak

Uygulamamda bir yönergeye sahip olmak istediğim bir sorun yaşıyorum ve şablonunun içinde, aynı yönergenin içinde aynı yönergeyi oluşturup oluşturmayacağına koşullu olarak karar vermesi gerekir. Yeniden yaratmaya çalıştım ve bu örnek de çalışmıyor. Direktif işlenmemiş ve hatasızdır. Bununla birlikte farklı bir hata yapabilirdim.İç içe geçmiş angularjs yönergeleri yinelemeli olarak

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

kaynak

2016-03-21 tic

Temel olarak, geçerli yönerge uygulamanızda 3 sorun var.

sorun tekrar ul olan bir şablon ekliyor replace: true ile li elemana direktifini buydu. Sonuç olarak, sonuçta ortaya çıkan html, ul'un ul içine tekrar sahip olamayacağı için, formatta yanlıştı. ** Eğer replace: false için replace: true yönergesine değiştirin YA sadece bu seçeneği kaldırın . ** Orada

senin direktifi şablona menu.Submenus Şablon menu.SubMenus

olmalıdır

<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

kaynak

2016-03-21 17:53:26

Hey. Cevap için teşekkürler. Ancak özyinelemeli menüler oluşturulmaz. 1.1.1, 1.2.1, 1.3.1, vs var. – tic

@tic çoklu yazım hataları .. güncellenmiş yanıta bakın –

Çok beğeni topladı. Şimdi, gerçek programımda neyin yanlış olduğunu anlayabiliyor muyum diye görmem gerekiyor, çünkü şimdi 'SubMenus'a güncellendiğinden beri en azından çalıştığını görebiliyorum. 'length' orijinal kodumda doğruydu ve 'yerine: true' çalışıyor, aksi takdirde bir li içinde bir li var – tic

Sorun bir yazım hatası: Alt menü -> SubMenus

SubMenus ile script.js nesnelerini tanımladınız, ancak şablonunuzu Altmenüler'e yönlendiriyorsunuz.

kaynak

2016-03-21 18:04:15 user967710

Teşekkürler çocuklar. Bazen küçük aptalca şeyler – tic

tekrar cevap eklemenize gerek yok ... zaten kapalı 10+ dakika önce .. –

İç içe geçmiş angularjs yönergeleri yinelemeli olarak

cevap

İlgili konular