Question

我有几个菜单指令，外部菜单指令里面有几个菜单项元素。底部三个（“注册”，“登录”和“配置文件”）按预期工作。上面的链接是由ng-repeat生成的，它循环遍历在其他地方设置的对象数组。当我运行代码时，我发现创建了正确数量的菜单项，但没有显示ng-repeat设置的属性。 ng-repeat创建的链接没有路由，图标或标签。

我不明白。我的数据看起来很好，并且transcluded元素似乎可以访问菜单对象，因为正在输出适当数量的菜单项。

我的数据在哪里？

<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>

Answer 1

As you did not post your directive code, it is hard to say but usually when I use ng-repeat in directives, I follow this format in the link: method of the directive.

link: function(scope,element,attrs)
{
var el = angular.element(...string of text for my HTML....);
element.append(el);
$compile(el)(scope);
}

You need to add the $compile server to your directive of course. This method works well unless you deeper nested directives in which case I search for 1 of the many recursive services on the net and drop it in to my code. That way the newly added elements get bound and displayed correctly

在transcluded指令上的ng-repeat不显示对象属性

1 个答案: