使用AngularJS的JQuery自定义下拉插件

时间:2014-04-18 15:46:56

标签: javascript jquery angularjs jquery-plugins angularjs-directive

我已经看到了这个惊人的下降[在codrops] [1]。但我需要在AngularJS应用程序中使用它。如何在AngularJS应用程序中使用此JQuery插件。我是AngularJS的新手。是否有更好的方法只在AngularJS中使用它而不使用pligin?

修改

我尝试过以下指令

heeloApp.directive('dropDown', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).dropwdown(scope.$eval(attrs.dropDown));
        }
    };
});

这里是我的选择下拉列表的html,但它似乎不起作用。

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

我能看到的错误是

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

0 个答案:

没有答案