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

yiytaume  于 2023-05-16  发布在  Java
关注(0)|答案(2)|浏览(141)

我遇到了一个无法解决的恼人问题。我使用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>

当我运行代码时,我得到:
错误:语法错误,无法识别的表达式:#cardMoreActions{{feedback.FeedbackTrackerId}}

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

什么是正确的方式来写表达式告诉元素激活相应的id。在ng-repeat指令中使用materialize.css下拉列表的正确方法是什么?
为了完成请求,这里是“dropdown”指令中的激活代码

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

谢谢大家!

编辑

我发现了这个问题,似乎有关联
创建一个自定义的物化指令,该指令与data-activates属性中的{{expression}}一起使用
正如这里所建议的,我尝试在两个属性(“id”和“data-activation”)上添加ng-attr-前缀。很不幸我不喜欢。这实际上消除了错误消息,但下拉菜单不会显示,即使“active”类成功附加到下拉按钮,下拉内容仍然隐藏。这是否与我的指令在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>
kuhbmx9i

kuhbmx9i1#

cardMoreActions是一个函数,所以你必须更改为cardMoreActions({{eedback.FeedbackTrackerId}})
我希望这对你有帮助。

x6yk4ghg

x6yk4ghg2#

这就解决了问题

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

相关问题