Question

我正在开展一个项目，我同时使用angularJS和foundation，所以我正在利用Angular Foundation项目来获取基础的所有javascript部分。我刚从0.2.2升级到0.3.1，导致顶栏指令出现问题。

之前，我可以使用课程has-dropdown来表示＆＃34;顶栏＆＃34;菜单项，其中包含下拉列表。由于菜单项是从列表中获取的，只有一些具有实际的下拉列表，我将使用以下代码：

<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

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

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

然后该指令检查该值，并为某些原因返回true作为字符串。也许一些onc可以阐明那个

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属性。可能有一个更清洁的解决方案，但这就是我所知道的。我还是个新角色。

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

Answer 2

根据this answer，从Angular＆gt; = 1.3，您可以使用ngAttr实现此目标（docs）：

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

所以，例如：

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

＆＃13;

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'
      }]
    };
  }
]);

＆＃13;

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

＆＃13;

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

2 个答案: