使用 AngularJs + Materialize.css 的多个下拉菜单答案

【问题标题】：Multiple dropdown menus using AngularJs + Materialize.css使用 AngularJs + Materialize.css 的多个下拉菜单
【发布时间】：2018-03-29 04:36:57
【问题描述】：

您好，我遇到了一个无法解决的烦人问题。我正在使用 AngularJs 显示一系列卡片，每张卡片都有自己的下拉菜单。

代码如下：

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

当我运行我得到的代码时：

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 的正确方法是什么？

要完成请求，这里是“下拉”指令中的激活码

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

谢谢大家！

编辑

正如那里所建议的，我尝试在两个属性（“id”和“data-activation”）上添加 ng-attr- 前缀。不幸的是，它对我不起作用。这实际上消除了错误消息，但下拉菜单不显示，即使“活动”类成功附加到下拉按钮，下拉内容仍然隐藏。这可能与我的指令在 ngRepeat 指令中循环的事实有关吗？

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

这是修改后的代码，可惜还是不行

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

【问题讨论】：

我真的可以在这里使用帮助，真的卡住了。谢谢大家。

标签： javascript css angularjs materialize

【解决方案1】：

cardMoreActions 是我认为的功能，因此您必须更改为cardMoreActions({{eedback.FeedbackTrackerId}})

希望对你有所帮助。

【讨论】：

"cardMoreActions" 不是函数。 data-activates 指令的内容应该与 dropdown-content id 相同，以便下拉菜单在 materialize.css - materializecss.com/dropdown.html 中工作

【解决方案2】：

这样就解决了问题

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

【讨论】：