いくつかのメニュー ディレクティブがあります。外側のメニュー ディレクティブには、その内部にいくつかのメニュー項目要素があります。下の 3 つ (「サインアップ」、「サインイン」、「プロファイル」) は期待どおりに機能します。上記のリンクは、別の場所に設定されているオブジェクトの配列をループする ng-repeat によって生成されます。コードを実行すると、正しい数のメニュー項目が作成されていますが、ng-repeat によって設定された属性が表示されていません。ng-repeat で作成されたリンクには、ルート、アイコン、またはラベルがありません。
理解できない。適切な数のメニュー項目が出力されているため、データは正常に見え、トランスクルードされた要素はメニュー オブジェクトにアクセスできるようです。
私のデータはどこに行きましたか?
<jrt-menu data-ng-if="menu.shouldRender(authentication.user);">
<jrt-menu-item
ng-repeat="item in menu.items | orderBy: 'position'"
label="{{item.title}}"
icon="{{item.icon}}"
route="{{item.link}}">
</jrt-menu-item>
<jrt-menu-item label="Sign Up"
route="subitem.link"
ng-class="{active: $uiRoute}"
data-ng-hide="authentication.user">
</jrt-menu-item>
<jrt-menu-item label="Sign In"
route="/signin"
ng-class="{active: $uiRoute}"
data-ng-hide="authentication.user">
</jrt-menu-item>
<jrt-menu-item label="Profile"
icon="fa-dashboard"
route="/settings/profile"
ng-class="{active: $uiRoute}"
data-ng-show="authentication.user">
</jrt-menu-item>
</jrt-menu>
生成された HTML:
<ul class="jrt-menu" ng-transclude="">
<!-- ngRepeat: item in menu.items | orderBy: 'position' -->
<jrt-menu-item ng-repeat="item in menu.items | orderBy: 'position'" label="" icon="" route="" class="ng-scope ng-isolate-scope">
<li class="jrt-menu__item ng-binding" ng-class="{'vertical': !isVertical(), 'horizontal': !isVertical()}">
<i class="fa jrt-menu__icon"></i>
<!-- ngIf: isActive() && isVertical() -->
</li>
</jrt-menu-item>
<!-- end ngRepeat: item in menu.items | orderBy: 'position' -->
<jrt-menu-item ng-repeat="item in menu.items | orderBy: 'position'" label="" icon="" route="" class="ng-scope ng-isolate-scope">
<li class="jrt-menu__item ng-binding" ng-class="{'vertical': !isVertical(), 'horizontal': !isVertical()}">
<i class="fa jrt-menu__icon"></i>
<!-- ngIf: isActive() && isVertical() -->
</li>
</jrt-menu-item>
<!-- end ngRepeat: item in menu.items | orderBy: 'position' -->
<jrt-menu-item label="Sign Up" icon="subitem.icon" route="subitem.link" ng-class="{active: $uiRoute}" data-ng-hide="authentication.user" class="ng-scope ng-isolate-scope ng-hide">
<li class="jrt-menu__item ng-binding" ng-class="{'vertical': !isVertical(), 'horizontal': !isVertical()}">
<i class="fa subitem.icon jrt-menu__icon"></i>Sign Up
<!-- ngIf: isActive() && isVertical() -->
</li>
</jrt-menu-item>
<jrt-menu-item label="Sign In" icon="subitem.icon" route="/signin" ng-class="{active: $uiRoute}" data-ng-hide="authentication.user" class="ng-scope ng-isolate-scope ng-hide">
<li class="jrt-menu__item ng-binding" ng-class="{'vertical': !isVertical(), 'horizontal': !isVertical()}">
<i class="fa subitem.icon jrt-menu__icon"></i>Sign In
<!-- ngIf: isActive() && isVertical() -->
</li>
</jrt-menu-item>
<jrt-menu-item label="Profile" icon="" route="/settings/profile" ng-class="{active: $uiRoute}" data-ng-show="authentication.user" class="ng-scope ng-isolate-scope">
<li class="jrt-menu__item ng-binding" ng-class="{'vertical': !isVertical(), 'horizontal': !isVertical()}">
<i class="fa jrt-menu__icon"></i>Profile
<!-- ngIf: isActive() && isVertical() -->
</li>
</jrt-menu-item>
</ul>