在ng-repeated元素上有条件地应用hasDropdown指令
在ng-repeated元素上有条件地应用hasDropdown指令
我正在一个项目中同时使用angularJS和foundation，所以我正在使用Angular Foundation项目来使foundation的所有javascript部分工作。我刚刚从0.2.2升级到0.3.1，导致顶部导航指令出现问题。\n之前，我可以使用类名has-dropdown来表示一个具有下拉菜单的“顶部导航”菜单项。由于菜单项是从一个列表中获取的，并且只有一些菜单项实际上具有下拉菜单，我会使用以下代码：\n
\n然而，最新版本要求使用属性has-dropdown而不是类。我尝试了几种解决方案来有条件地包含这个属性，但是没有一种方法似乎有效：\n
\n这给我一个true或false的值，但无论哪种情况下，指令实际上都是处于活动状态的。对于使用ng-attr-has-dropdown也是一样。\n这个答案使用了有条件地应用其中一个带有指令属性的元素的方法。如果是同一个元素是拥有ng-repeat的那个，那么这种方法就不起作用了，所以我想不出任何办法使它适用于我的代码示例。\n这个答案我不明白。这适用于我吗？如果适用，大致上它是如何工作的？由于项目的设置，我已经编写了几个控制器和服务，但是对于自定义指令，我几乎没有任何经验。\n所以简而言之，这是可能的吗，如何实现？
问题的原因是在指令中使用了一个属性，但是该属性的值以字符串的形式返回，而不是布尔值。解决方法是通过判断属性值来为元素添加一个指令。
首先，需要在每个`
具体的解决方法如下所示：
app.directive('isDropDown', function () {
return {
link: function (scope, el, attrs) {
if (attrs.isDropDown === 'true') {
return el.attr('has-dropdown', true);
}
}
};
});
通过上述方法，在`test2`元素中可以看到`has-dropdown`属性。可能还有更简洁的解决方法，但这是我所知道的。我还是对Angular比较陌生。
补充：我注意到示例JSON数据中有一些多余的逗号，虽然这样也能正常工作，但是其实不应该在那里。
这很棒，谢谢！我仍然在尝试将它应用到我的应用程序中，但它确实是朝着正确的方向迈出了一大步。我目前遇到以下错误（在浏览器控制台中）："Error: [$compile:ctreq] Controller 'hasDropdown', required by directive 'topBarDropdown', can't be found!"。我有一种感觉，这意味着在解析页面之前，'hasDropdown'指令已经在某个阶段被要求存在。这是可能的吗？是否可以改变时间以便及时加载？（attribute在DOM中是可见的，所以这是一个问题）
您在上面的代码中放置了指令吗？如果您只是复制/粘贴，那么您必须确保您的app变量确实被命名为app。除非您已经指定了var app = angular.module('YourApp',[])，否则app.directive将不起作用。如果它是类似var myAwesomeApp = angular.module(...)这样的情况，那么指令将是myAwesomeApp.directive(...)。
嘿，我相当确定我已经正确放置了它，我的应用程序比基本的1个js文件设置要大/复杂得多，但是由于属性确实出现，控制台日志也会在正确的时间显示，所以我相当确定它在基本级别上是有效的。我将尝试移动指令的引入位置，但我认为它与Angular-Foundation的“topBarDropdown”指令有关，该指令需要“hasDropdown”指令存在，但是它们的时间顺序不正确。
我刚刚意识到我可能问错了问题。我不是在有条件地应用属性，我试图有条件地应用指令。您的答案对于标题中的问题是正确的。
好的，所以`has-dropdown`属性将始终存在？您能给我一个计算条件与另一个条件的示例吗？不确定您所说的有条件地应用指令是什么意思。
不，您的答案对于`has-dropdown`是完全正确的，但问题在于它不仅仅是一个属性。它是一个作为底层下拉菜单工作所需的指令。您的答案完美地将属性本身添加到HTML中，但是它是在Angular不再将其解析为指令的阶段添加的。不确定我是否表达清楚，我想不到更好的方式来表达它。
噢，是的，我明白你的意思了。Angular可能不会解析它，因为它是在之后添加的。您使用的是哪个插件，这样我就可以用您尝试做的任何东西创建一个测试应用程序。我知道我可以找出来...只需要一点时间。只是这个foundation的事情吗？
是`mm.foundation.topbar`吗？
让我们在聊天中继续讨论。
问题的原因是在ng-repeat指令中，想要根据条件来应用hasDropdown指令。解决方法是使用ng-attr-has-dropdown指令，并通过三元运算符来判断是否应用hasDropdown指令。具体代码如下：
- {{item.name}}
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'
}]
};
}
]);
这样就可以根据item.subItems.length的值来动态决定是否应用hasDropdown指令。这个解决方法已经被修复并在Angular中得到了官方认可，因此是一个更加规范的解决方案。