使用AngularJs + Materialize.css多重下拉菜单(Multiple dropd

2019-09-26 12:52发布

你好,我遇到了一个恼人的问题,我无法修复。 我使用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以正确的方式。 什么是使用materialize.css dropdwn一个NG重复指令内的正确方法是什么?

在这里完成请求的激活码在“下拉菜单”指令

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

感谢大家!

编辑

我发现这个问题,似乎至极相关

创建自定义兑现指令,与工作{{表达式}}在数据激活属性

至于建议在那里,我试图添加两个属性的NG-attr-前缀(“id”和“数据激活”)。 遗憾的是它并没有为我工作。 这实际上摆脱了错误的消息,但是下拉菜单没有显示出来,即使“活动”类被成功地连接到的下拉按钮,在下拉内容保持隐藏。 难道是相关的事实,我的指令是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>

Answer 1:

cardMoreActions是一个功能我觉得是这样,你必须改变cardMoreActions({{eedback.FeedbackTrackerId}})

我希望这有助于你。



Answer 2:

这解决了问题

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


文章来源: Multiple dropdown menus using AngularJs + Materialize.css