2014-09-03 2 views
0

Я пытался создать пользовательскую директиву для jQuery UI ComboBox, она должна работать как автозапуск и выпадающее меню. Ни я не получаю внешний вид и логику. Я хочу использовать его, как это дано в JQueryUIjqueryui combo custom директива в angularjs

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> 

ответ

0

Если вы открываете какой-то инструменты разработчика в вашем браузере, то вы увидите, что в консоли появляется ошибка:

Uncaught ReferenceError: angular is not defined 

Если вы пытаетесь Угловой JS в Fiddle, тогда вы должны включить библиотеку 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: Uncaught Error: [$injector:modulerr] Failed to instantiate module?

Но даже тогда будет больше ошибок из-за того, как скрипку работы службы. Вместо этого я рекомендую вам попробовать http://plnkr.co/ сервис, потому что он предоставляет вам шаблон AngularJS, поэтому у вас есть простое приложение.

Но вот как я визуальный вид рабочего

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

Чтобы получить логическую работу, вам нужно прочитать больше о AngularJS.

Смежные вопросы