angularjs - 有条件地对 ng-repeated 元素应用 hasDropdown 指令

Question

我正在开发一个同时使用 AngularJS 和 Foundation 的项目，因此我正在使用 Angular Foundation项目使基础的所有 javascript 部分都能正常工作。我刚刚从 0.2.2 升级到 0.3.1，导致顶部栏指令出现问题。

之前，我可以使用类 has-dropdown 来指示其中包含下拉菜单的“顶栏”菜单项。由于菜单项是从列表中获取的，并且只有一些菜单项具有实际的下拉菜单，因此我将使用以下代码:

<li ng-repeat="item in ctrl.items" class="{{item.subItems.length > 0 ? 'has-dropdown' : ''}}">

但是，最新版本需要 has-dropdown 属性而不是类。我尝试了几种解决方案来有条件地包含此属性，但似乎都不起作用:

<li ng-repeat="item in ctrl.items" has-dropdown="{{item.subItems.length > 0}}">

这给了我一个 true 或 false 值，但在这两种情况下指令实际上都是事件的。使用 ng-attr-has-dropdown 也是如此。

this answer使用一种有条件地应用一个或另一个元素的方法，一个带有指令属性，一个不带有指令属性。如果同一个元素是持有 ng-repeat 的元素，那么这不起作用，所以我想不出任何方法来使其适用于我的代码示例。

this answer我不明白。这适用于我吗？如果是这样，大致将如何运作？由于项目的设置，到目前为止我已经编写了一些 Controller 和服务，但到目前为止我几乎没有任何自定义指令的经验。

简而言之，这可能吗？如何实现？

Answer 1

根据 this answer ，从 Angular>=1.3 开始，您可以使用 ngAttr 来实现此目的( docs ):

If any expression in the interpolated string results in undefined, the attribute is removed and not added to the element.

例如:

<li ng-repeat="item in ctrl.items" ng-attr-has-dropdown="{{ item.subItems.length > 0 ? true : undefined }}">

angular.module('app', []).controller('testCtrl', ['$scope',
  function ($scope) {
    $scope.ctrl = {
      items: [{
        subItems: [1,2,3,4], name: 'Item 1'
      },{
        subItems: [], name: 'Item 2'
      },{
        subItems: [1,2,3,4], name: 'Item 3'
      }]
    };
  }
]);

<div ng-app="app">
  <ul ng-controller="testCtrl">
    <li ng-repeat="item in ctrl.items" ng-attr-has-dropdown="{{ item.subItems.length > 0 ? true : undefined }}">
      {{item.name}}
    </li>
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>