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

Question

您好，我遇到了一个令人讨厌的问题，我无法修复。 我使用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(); 
     }, 
    } 
}); 

谢谢大家！

编辑

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

Creating a custom materialize directive that works with an {{expression}} in data-activates attribute

至于建议在那里，我试图添加两个属性的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

这解决了问题

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

Answer 2

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

我希望这有助于你。