angularjs中的jqueryui组合自定义指令

Question

我试图为jQuery UI ComboBox创建一个自定义指令，它应该像自动建议和下拉菜单一样工作。我既没有得到外观和感觉，也没有得到逻辑。我想按照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在下面给出

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

Answer 1

如果你在浏览器中打开某种开发工具，那么你会在控制台中看到一个错误：

Uncaught ReferenceError: angular is not defined

如果你在Fiddle中尝试AngularJS，那么你应该包括AngularJS"库"（它实际上是一个框架）。

但这并不是全部。

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.

你可以在这里阅读关于这个问题：

AngularJS:未捕获错误：[$injector:modulerr]未能实例化模块？

但即便如此，由于Fiddle服务的运行方式，仍会出现更多错误。相反，我建议你试试http://plnkr.co/服务，因为它为您提供了AngularJS模板，所以您可以运行一个简单的应用程序。

但以下是我如何获得的视觉效果

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

要使逻辑正常工作，您需要阅读更多关于AngularJS的内容。