Использование SelectBoxIt в директиве AngularJS

78
10

Я хочу реализовать SelectBoxIt в моей директиве angularJS. Вот мой шаблон директивы html snippet (lookup.template.html):

<select class="selectBoxit" ng-model="ngModel">
<option value="" disabled> {{placeholder}}</option>
<option value='{{a.LookupCode}}' ng-repeat='a in lookups'>{{a.Name}}</option>
</select>

Директива по выделенной области:

.directive('lookup', function(){
return {
restrict: 'E',
scope: {
lookups: "=lookups",
ngModel: "=ngModel"
},
templateUrl: 'templates/lookup.template.html',
link: function (scope, element, attrs) {
scope.placeholder = attrs['placeholder'];
$(".selectBoxit").selectBoxIt().on('open', function()
{
//ScrollBar
$(this).data('selectBoxSelectBoxIt').list.perfectScrollbar();
});
}
}
});

Контроллер поиска:

 .controller('LookupController', function($scope){
$scope.schoolTypeCode = 'GNR';
$scope.schoolTypes = [{ Name: "Kinder Garten", LookupCode: "KG" },
{ Name: "Elemetary", LookupCode: "ELM" },
{ Name: "High School", LookupCode: "HSC" },
{ Name: "Preparatory", LookupCode: "PRP" },
{ Name: "General", LookupCode: "GNR" },
{ Name: "Distance", LookupCode: "DST" }];
});

и, наконец, посмотрим с помощью директивы:

<lookup  id="cboSchoolType" lookups="schoolTypes"
ng-model="SchoolTypeCode" placeholder="Select School Type"></lookup>

Инициализация SelectBoxIt работала нормально, но я заметил две проблемы. Во-первых, значение по умолчанию (ngModel) не назначается и второе, инициализация происходит до того, как угловые повторы завершат заполнение опций. Это приведет к появлению пустого списка выбора и следующего сообщения об ошибке при нажатии:

Uncaught TypeError: Не удается прочитать список свойств неопределенного

Итак, есть ли другие способы установить значение по умолчанию и запустить инициализацию SelectBoxIt после того, как параметры заполняются угловым повторением?

Благодарю.

спросил(а) 2021-01-20T00:59:56+03:00 6 месяцев назад
1
Решение
64

попробуйте "выпадающее меню" вместо "списка",

поэтому вместо

$(this).data('selectBoxSelectBoxIt').list.perfectScrollbar();

попробуйте эту строку в вашей функции события

$(this).data('selectBoxSelectBoxIt').dropdown.perfectScrollbar();

ответил(а) 2021-01-20T00:59:56+03:00 6 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема