I am encountering a troublesome issue that I just can't seem to resolve. My current setup involves using AngularJs to showcase a set of cards, each equipped with its own dropdown menu.
Here's the snippet of code in question:
<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>
Upon running this code, I encountered the following error:
Error: Syntax error, unrecognized expression: #cardMoreActions{{feedback.FeedbackTrackerId}}
This occurred at the following segment of code:
<a class="dropdown-button" dropdown="" href="#" data-activates="cardMoreActions{{feedback.FeedbackTrackerId}}">
What is the correct way to structure the expression to specify the activation of the corresponding ID? Additionally, how should I properly implement a materialize.css dropdown within an ng-repeat directive?
To provide more context, here is the activation code within the "dropdown" directive:
TK.directive('dropdown', function() {
return {
restrict: 'A',
link: function(scope, elem, attr) {
elem.dropdown();
},
}
});
Thank you in advance for any assistance!
EDIT
In my search for answers, I came across a related question:
Creating a custom materialize directive that works with an {{expression}} in data-activates attribute
Following the suggestions provided there, I attempted to add the ng-attr- prefix to both attributes ("id" and "data-activation"). However, this did not resolve the issue. Although it eliminated the error message, the dropdown menus remained hidden even though the "active" class was successfully applied to the dropdown button. Could this be linked to the fact that my directive is nested within an ngRepeat directive?
Any help or feedback would be greatly appreciated.
Below is the updated code after the edit, unfortunately still not yielding the desired outcome:
<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>