Multiple dropdown menus using AngularJs + Materialize.css

问题

Hello I'm experiencing an annoying issue that i cannot fix. I'm using AngularJs to display a serie of cards, each one having its own dropdown menu.

Here's the code:

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

When I run the code I got:

Error: Syntax error, unrecognized expression: #cardMoreActions{{feedback.FeedbackTrackerId}}

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

What's the right way to write the expression to tell the element to activate the corresponding id. What's the correct way to use a materialize.css dropdwn inside a ng-repeat directive?

To complete the request here's the activation code in the "dropdown" directive

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

Thanks everyone!

EDIT

I've found this question, wich seems related

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

As suggested there, I've tried to add the ng-attr- prefix on both the attributes ("id" and "data-activation"). Unfortunately it doesn't work for me. This actually gets rid of the error message, but the dropdown menus don't show up, even if the "active" class is succesfully attached to the dropdown button, the dropdown content remains hidden. Could it be related to the fact that my directive is looped inside a ngRepeat directive?

Thanks anyone for your help or feedback.

Here's the code after the edit, wich unfortunately still doesn't work

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

回答1:

cardMoreActions is a function i think so you have to change to cardMoreActions({{eedback.FeedbackTrackerId}})

I hope this helped you.

回答2:

This solves the problem

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

来源：https://stackoverflow.com/questions/46790943/multiple-dropdown-menus-using-angularjs-materialize-css

标签

javascript

css

angularjs

materialize