1

いくつかのメニュー ディレクティブがあります。外側のメニュー ディレクティブには、その内部にいくつかのメニュー項目要素があります。下の 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>
4

1 に答える 1