2

我正在开发一个同时使用 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.

这个答案使用一种有条件地应用一个或另一个元素的方法，一个有一个没有指令属性。如果同一个元素是持有的那个，那是行不通的，ng-repeat所以我想不出任何方法来使它适用于我的代码示例。

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

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

4

2 回答 2

1

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

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

于 2014-09-08T19:57:23.033 回答
1

根据这个答案，从 Angular>=1.3 你可以使用 ngAttr 来实现这个（文档）：

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

因此，例如：

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

于 2015-03-03T09:51:42.490 回答