為什么我的指令沒有渲染任何綁定的元素？

Question

這源於我在Angular中使用ng-repeat進行遞歸的問題，但絕不是重復的。 現在我知道該怎么做了，但是我在問為什么我當前的問題解決方案不起作用。

我正忙於適應巨大的Metronic Angular主題，我的首要任務是從REST API動態加載側菜單項。 在主要index.html頁面（僅使用的頁面：spa）中，容器的外觀如下所示：

<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 ，用於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的scope屬性，因此它們應可用於綁定。

最后，菜單項在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代碼字面量很臭。

現在我只是得到一個空的側面菜單，控制台中沒有任何錯誤（一定喜歡Angular的那一部分），並且想知道我是否在做任何明顯錯誤的事情。

Answer 1

問題出在您的指令名稱上，angular根本無法識別您的指令，因為它不能很好地處理屬性名稱中的大寫字母。 將rsng-menuItem重命名為rsng-menu-item 。

但是，這將不起作用，因為您不能僅以遞歸方式將指令嵌套在angular中，它會以無限循環結尾。

有多種解決方案，請查看Angular指令中的遞歸和https://github.com/marklagendijk/angular-recursion