jqueryui combo custom directive in angularjs

Question

I was trying to create a custom directive for jQuery UI ComboBox , it should work like an autosuggestion and dropdown. Neither i am getting the look and feel nor the logic. I want to use it as it is given in the JQueryUI

var DataApp = angular.module("DataApp", []);
DataApp.controller('loginCtrl', loginCtrl);
var loginCtrl = function ($scope) {
$scope.listLang = [{
    lang: "AppleScript"}, {
    lang: "Asp"
}, {
    lang: "BASIC"
}, {
    lang: "C"
}, {
    lang: "C++"
}, {
    lang: "Clojure"
}, {
    lang: "COBOL"
}, {
    lang: "ColdFusion"
}, {
    lang: "Erlang"
}];
};

 DataApp.directive('comboBox1', function() {

return {
    restrict  : 'A',
    link: function(scope, element, attrs) {
        $(element).combobox();
        }
}

});

HTML is given below

<div ng-app="DataApp">
<div ng-contorller="loginCtrl">
    <div class="ui-widget" combo-box1='{}'>
        <label>Your preferred programming language:</label>
        <select id="combobox" ng-model="list-items" ng-options="listItem.lang for listItem in listLang"></select>
    </div>
</div>

score 0 · Answer 1 · edited May 23 '17 at 11:57

If you open some kind of developer tools in your browser, then you will see that in the console, there is an error:

Uncaught ReferenceError: angular is not defined

If you are trying AngularJS in Fiddle, then you should include AngularJS 'library' (it is actually a framework).

But this not all.

Uncaught Error: [$injector:modulerr] Failed to instantiate module DataApp due to:
Error: [$injector:nomod] Module 'DataApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

You can read about this problem here:

AngularJS: Uncaught Error: [$injector:modulerr] Failed to instantiate module?

But even then there will be more error because of how Fiddle service runs. Instead I recommend you to try http://plnkr.co/ service, because it provides you with AngularJS template, so you have a simple app running.

But here is how I got the visual look working

http://jsfiddle.net/walts/53b7g83c/

To get the logic working, you need to read more about AngularJS.

jqueryui combo custom directive in angularjs

1 Answers1