Angular directive for custom select/dropdown

Question

I'm trying to create a directive main custom select component, which use different types of data. e.g. Country data, Options data, etc.

The thing is that I don't know what is the 'Angular way' to do that, since I'm wondering if the data should be in another file (using scope or not?), and then rendering them somehow from the directive. If someone can bring some light on that, would be super helpful and I'd be very appreciative! Thanks a lot!!

Solution

Have a look at this multiselect dropdown directive I wrote. IMO the best way to learn angular directives is just to start messing around writing your own. This is also a good article.

Comments

[DreaMTT]

Thanks for sharing this! Really helpful. I'm trying to move forward using your example but I'm having some trouble when I want to change the ng-model dynamically, it seems that it doesn't update the inner scope. I just edited your plunkr to give you an idea of what is going on: plnkr.co/edit/siZXXf0DgezFToCYQkHK?p=preview ( Look in script.js [ EDIT Section ]). Do you know why?

[Mohammad Sepahvand]

@DreaMTT see this fork. 2 things: whenever you want to update something in angular use $timeout (because this automatically calls a scope.$apply() and updates the bindings) and not the native javascript setTimeout(), read up about that. Secondly yea, as you noticed that was a bug in the dropdown, the model was getting updated but i was not updating the dropdown's label text, see the directives code on lines 18-20, i added a watch to update the label whenever it changes.

[DreaMTT]

Thanks a lot Mohammad!