使用AngularJs + Materialize.css的多个下拉菜单 [英] Multiple dropdown menus using AngularJs + Materialize.css

问题描述

你好，我遇到一个烦人的问题，无法解决. 我正在使用AngularJs来显示一系列牌，每个牌都有其自己的下拉菜单.

Hello I'm experiencing an annoying issue that i cannot fix. I'm using AngularJs to display a serie of cards, each one having its own dropdown menu.

这是代码:

<div ng-repeat="feedback in feedbacks"  
    class="card">
    <div class="cardMoreActionsButton">
        <a  class="dropdown-button" 
            dropdown 
            href="#"  
            data-activates="cardMoreActions{{feedback.FeedbackTrackerId}}">
            <i class="material-icons grey-icon">more_vert</i>
        </a>
        <ul id="cardMoreActions{{feedback.FeedbackTrackerId}}" 
            class="dropdown-content">
            <li>
                <a ng-click="archiveFeedback(feedback.FeedbackTrackerId)">
                     Archive feedback
                </a>
            </li>
        </ul>
    </div>
    Card content
</div>

运行代码时，我得到了:

When I run the code I got:

Error: Syntax error, unrecognized expression: #cardMoreActions{{feedback.FeedbackTrackerId}}

在

<a class="dropdown-button" dropdown="" href="#" data-activates="cardMoreActions{{feedback.FeedbackTrackerId}}">

编写表达式以告诉元素激活相应ID的正确方法是什么. 在ng-repeat指令中使用materialize.css dropdwn的正确方法是什么?

What's the right way to write the expression to tell the element to activate the corresponding id. What's the correct way to use a materialize.css dropdwn inside a ng-repeat directive?

要完成请求，请在下拉列表"指令中找到激活码

To complete the request here's the activation code in the "dropdown" directive

TK.directive('dropdown', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attr) {
            elem.dropdown();
        }, 
    }
});

谢谢大家！

编辑

我找到了这个问题，似乎很相关

I've found this question, wich seems related

正如那里所建议的，我试图在两个属性("id"和"data-activation")上都添加ng-attr-前缀. 不幸的是，这对我不起作用. 实际上，这消除了错误消息，但是即使活动"类成功附加到了下拉按钮，下拉菜单也不会显示，但下拉菜单内容仍处于隐藏状态. 可能与我的指令在ngRepeat指令内循环的事实有关吗?

As suggested there, I've tried to add the ng-attr- prefix on both the attributes ("id" and "data-activation"). Unfortunately it doesn't work for me. This actually gets rid of the error message, but the dropdown menus don't show up, even if the "active" class is succesfully attached to the dropdown button, the dropdown content remains hidden. Could it be related to the fact that my directive is looped inside a ngRepeat directive?

感谢任何人的帮助或反馈.

Thanks anyone for your help or feedback.

这是编辑后的代码，遗憾的是仍然无法正常工作

Here's the code after the edit, wich unfortunately still doesn't work

<div ng-repeat="feedback in feedbacks"  
    class="card">
    <div class="cardMoreActionsButton">
        <a  class="dropdown-button" 
            dropdown 
            href="#"  
            ng-attr-data-activates="cardMoreActions{{feedback.FeedbackTrackerId}}">
            <i class="material-icons grey-icon">more_vert</i>
        </a>
        <ul ng-attr-id="cardMoreActions{{feedback.FeedbackTrackerId}}" 
            class="dropdown-content">
            <li>
                <a ng-click="archiveFeedback(feedback.FeedbackTrackerId)">
                     Archive feedback
                </a>
            </li>
        </ul>
    </div>
    Card content
</div>

推荐答案

这解决了问题

TK.directive('dropdown', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attr) {
            elem.ready(function(){
                elem.dropdown();
            });         
        }, 
    }
});

这篇关于使用AngularJs + Materialize.css的多个下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！