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

Question

我正在开发一个同时使用 angularJS 和 Foundation 的项目，因此我正在使用 Angular Foundation 项目来让 Foundation 的所有 javascript 部分正常工作。我刚从 0.2.2 升级到 0.3.1，导致 top bar 指令出现问题。

以前，我可以使用 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}}">

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

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

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

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

Answer 1

根据this answer，从 Angular>=1.3 开始，您可以使用 ngAttr 来实现这一点 (docs)：

如果插值字符串中的任何表达式导致未定义，则 属性已被移除且未添加到元素中。

所以，例如：

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

Answer 2

好的，我做了一个指令。所有<li> 都需要一个初始属性：

is-drop-down="{{item.subItems.length > 0}}"

然后该指令检查该值并出于某种原因将其作为字符串返回 true。也许有些曾经可以阐明这一点

app.directive('isDropDown', function () {
    return {
        link: function (scope, el, attrs) {
           if (attrs.isDropDown == 'true')
           {
               return el.attr('has-dropdown', true); //true or whatever this value needs to be
           }
       }
    };
});

http://jsfiddle.net/1qyxrcd3/

如果你检查test2，你会看到它有一个has-dropdown 属性。可能有一个更清洁的解决方案，但这就是我所知道的。我还是 Angular 的新手。

编辑我注意到我的示例 json 数据中有几个额外的逗号。请注意，仍然有效，但它们不应该存在。