これは、Angularでのng-repeatを使用した再帰に関する私の質問に基づいていますが、重複するものではありません。今、私はそれを行う方法を知っていますが、問題に対する私の現在の解決策が機能していない理由を尋ねています。
私は巨大なMetronic
Angularテーマを適応させるのに忙しく、私の最初のタスクは、RESTAPIからサイドメニュー項目を動的にロードすることです。メインindex.html
ページ(使用されているページのみ:スパを行っている)のサイドメニーのコンテナは次のようになります。
<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を記述していました。コードリテラルは悪臭を放ちます。
今、私はコンソールにエラーがなく(Angularのその部分が大好きです)、空のサイドメニューを取得し、明らかに間違ったことをしているのではないかと思っていました。
問題はディレクティブ名にあります。angularは属性名の大文字をうまく処理できないため、ディレクティブを認識しません。名前rsng-menuItem
をに変更しrsng-menu-item
ます。
ただし、ディレクティブを角度で再帰的にネストすることはできないため、これは機能しません。無限ループで終了します。
これには複数の解決策があります。Angularディレクティブの再帰とhttps://github.com/marklagendijk/angular-recursionをご覧ください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加