AngularJS: Custom dropdown directive

1.4k Views Asked by At

So currently I'm using Angular Material dropdown directive, here is an example of usage

<md-select ng-model="scopeClinic">
    <md-option ng-value="clinic.id" ng-repeat="clinic in clinics">{{ clinic.name }}</md-option>
</md-select>

As you see, usage is pretty simple, but I'm not really satisfied how the library behaves in most cases and now I want to create my own dropdown directive, using bootstrap template

<div class="dropdown">
    <button class="btn dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example<span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
    </ul>
</div>

I want to make a transfer with minimal changes, just changing md-select to my-select and md-option to my-option as well. I read a lot of documentation, but still I have no idea where to start from. Currently the most question for me is to understand how to put my-option directive into my-select directive, make a link between them, convert <my-option> into <li> options (I'm not sure even if I'm thinking in a right way). If someone can show me a base example where I can start that would be great. Thanks!

0

There are 0 best solutions below