私のディレクティブがバインドされた要素をレンダリングしないのはなぜですか？

Question

これは私の質問Recursion with ng-repeat in Angularに従いますが、重複しているわけではありません。今私はそれを行う方法を知っていますが、問題への私の現在の解決策が機能していない理由を尋ねています。

ぼんやりとしたMetronic角度のテーマに適応しています。最初のタスクは、REST APIからサイドメニュー項目を動的に読み込むことです。メインindex.htmlページ（使用のみのページ：やっスパ）でのサイドmenyのコンテナは、次のようになります。

<div data-ng-include="'tpl/sidebar.html'" data-ng-controller="SidebarController" class="page-sidebar-wrapper"></div> 

を次にsidebar.htmlは次のようになります。

<div class="page-sidebar navbar-collapse collapse"> 
    <ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" 
     ng-class="{'page-sidebar-menu-closed': settings.layout.pageSidebarClosed}" 
     rsng-menuItem="menuItems"> 
    </ul> 
</div> 

あなたは私のカスタムに気付くでしょうメニューツリーを再帰的に使用するディレクティブ、rsng-menuItem、：

angular.module("ReflexPortalApp").directive("rsngMenuItem", ["$parse", function ($parse) { 
    return { 
     restrict: "A", 
     scope: true, 
     templateUrl: "/tpl/sidebar/menu-item.html", 
     link: function (scope, element, attrs) { 
      scope.List = $parse(attrs.rsngMenuItem)(scope); 
     } 
    } 
}]); 

、それはテンプレートですが、次のようになります。

<li ng-repeat="item in List" ng-class="{\'nav-item\': !item.IsHeading, \'start\': item.IsStart}"> 
    <a href="{{item.Href}}" ng-class="{\'nav-link nav-toggle\': item.subItems && item.subItems.length > 0}"> 
     <i ng-if="{{item.Icon && item.Icon.length > 0}}" class="icon-{{item.Icon}}"></i> 
     <span class="title">{{item.Text}}</span> 
     <span ng-if="{{item.DecorClass || item.DecorText}}" class="{{item.DecorClass}}">{{item.DecorText}}</span> 
    </a> 
    <ul rsng-menuItem="item.subItems" class="sub-menu"></ul> 
</li> 

SideBarController1, the menu items do load successfully from the REST API, and are assigned to the menuItemsスコープのプロパティなので、バインディングに使用する必要があります。

最後に、メニュー項目JSONで次のようになります。

{ 
    "IsDisabled": "0", 
    "seq": 2, 
    "Href": "javascript:;", 
    "Id": "2", 
    "IsStart": "0", 
    "IsNavItem": "1", 
    "DecorText": null, 
    "ApiCall": null, 
    "Index": 3, 
    "Text": "Accounting", 
    "Icon": "settings", 
    "ParentId": null, 
    "DecorClass": "arrow", 
    "subItems": [ 
    { 
     "DecorClass": "arrow", 
     "ParentId": "2", 
     "Icon": "wrench", 
     "Text": "Statement", 
     "Index": 1, 
     "ApiCall": "statement&CustID=4446&statementdate=2016-05-01", 
     "DecorText": null, 
     "IsNavItem": "0", 
     "IsStart": "0", 
     "Id": "3", 
     "Href": "list", 
     "seq": 1, 
     "IsDisabled": "0" 
    } 
    ] 
} 

私が開始され、テンプレートで再帰を行うにはどのような手掛かりを持っていなかった、私は単純に再帰的なコードループとjQueryを使用'手動で'構築し、各メニュー項目のすべての要素を設定し、うまくいきましたが、コードリテラルでHTMLを書くのはうんざりです。

コンソールにエラーのない空のサイドメニューが表示され、明らかに間違っていることがあるかどうか疑問に思っていました。

Answer 1

あなたのディレクティブ名に問題があります。アングルはアトリビュート名の大文字をうまく扱えないため、ディレクティブを認識できません。 rsng-menuItemの名前をrsng-menu-itemに変更します。

ただし、これは動作しません。角度でディレクティブを再帰的にネストすることはできないため、無限ループで終了します。あなたは、属性対ディレクティブ命名にタイプミスがある場合

このため、複数のソリューションがありますが、Recursion in Angular directivesを見て、 https://github.com/marklagendijk/angular-recursion