I have seen this amazing drop down [on codrops][1]. But I need to use this in an AngularJS application. How can I use this JQuery plugin in my AngularJS application. I am very new to AngularJS. Is there a better way to do it just in AngularJS without using the pligin?
Edit
I have tried the following directive
heeloApp.directive('dropDown', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$(element).dropwdown(scope.$eval(attrs.dropDown));
}
};
});
and here is the html for my select drop down but it dont seem to work.
<select id="cd-dropdown" class="cd-select" drop-down>
<option value="-1" selected>Choose your favorite animal</option>
<option value="1" class="icon-monkey">Monkey</option>
<option value="2" class="icon-bear">Bear</option>
<option value="3" class="icon-squirrel">Squirrel</option>
<option value="4" class="icon-elephant">Elephant</option>
</select>
The error I can see is
TypeError: Object [object Object] has no method 'dropwdown'
at link (http://localhost:8000/js/app.js:216:24)
at nodeLinkFn (http://localhost:8000/ionic-v0.9.26/js/ionic.bundle.js:13214:13)
at compositeLinkFn (http://localhost:8000/ionic-v0.9.26/js/ionic.bundle.js:12624:15)
at publicLinkFn (http://localhost:8000/ionic-v0.9.26/js/ionic.bundle.js:12529:30)
at prelink (http://localhost:8000/ionic-v0.9.26/js/ionic.bundle.js:33274:9)
at nodeLinkFn (http://localhost:8000/ionic-v0.9.26/js/ionic.bundle.js:13194:13)
at compositeLinkFn (http://localhost:8000/ionic-v0.9.26/js/ionic.bundle.js:12620:15)
at publicLinkFn (http://localhost:8000/ionic-v0.9.26/js/ionic.bundle.js:12529:30)
at link (http://localhost:8000/ionic-v0.9.26/js/angular/angular-route.min.js:7:348)
at nodeLinkFn (http://localhost:8000/ionic-v0.9.26/js/ionic.bundle.js:13214:13) <select id="cd-dropdown" class="cd-select" drop-down="">
[1]: http://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists