Здравствуйте!
Недавно мне довелось адаптировать ui-select под x-editable в Ангуляре и поскольку для этого пришлось потратить определенное количество времени, собирая по крупицам наиболее приемлемый вариант, сегодня я решил поделиться своими наработками с вами, в надежде на то, что кому-нибудь это сэкономит время.
Если вкратце, то полученная в итоге директива замещает стандартный editable-select, плюс дополнительная возможность добавлять объекты на лету.
Теперь подробнее.
Для начала начну с конца и приведу код директивы, позволяющей добавить кнопку в ui-select. На эту кнопку вешается функция, в моем случае — функция, вызывающая модальное окно(ui-bootstrap modal) с формой добавления нового объекта:
app.directive("addNewItem", function($timeout) {
return {
restrict: "A",
link: function(scope, e, attrs) {
var method = attrs.addNewItem;
var template = "<div class='add-new-item-container'>"+
"<button class='btn btn-xs btn-default pull-right'>Добавить</button>"+
"<div class='clearfix'></div></div>";
e.find('li.ui-select-choices-group').append(template);
e.find('div.add-new-item-container button').bind('click', function() {
// workaround for closing ui-select
$timeout(function() {
e.trigger("click");
});
var searchResult = e.find('li.ui-select-choices-row').length;
if ( ! searchResult ) {
var value = e.find('input.ui-select-search').val();
scope[method].apply(null, [value]);
} else {
scope[method].apply();
}
});
}
}
})
В принципе, код предельно прост, поэтому остановлюсь на паре моментов. Во-первых, ui-select не закрывается после нажатия кнопки, но закрывается, если кликнуть куда-нибудь по модальному окну. Поэтому пришлось добавить костыль с $timeout.
Во-вторых, (по поводу последнего if else): если в поиске ui-select не найдено ни одного элемента, я передаю значение поиска в метод, чтобы в дальнейшем автозаполнить этим значением форму и таким образом немного сэкономить время.
Теперь основная директива:
app.directive('editableUiSelect',
['editableDirectiveFactory', 'editableNgOptionsParser',
function(editableDirectiveFactory, editableNgOptionsParser) {
var dir = editableDirectiveFactory({
directiveName: 'editableUiSelect',
inputTpl: '<ui-select></ui-select>',
render: function() {
this.parent.render.call(this);
var parsed = editableNgOptionsParser(this.attrs.eNgOptions);
this.inputEl.attr('ng-model', 'editable.entity');
// слева директива, описанная вначале,
// справа - метод, в моем случае вызывающий модальное окно с формой добавления
this.inputEl.attr('add-new-item', 'addNewItem');
// поскольку модель самостоятельно не меняется, пришлось добавить этот метод
this.inputEl.attr('on-select', 'setModel($item)');
this.inputEl.attr('theme', 'select2');
this.inputEl.css('width', '200px');
var html = "<ui-select-match><span ng-bind='$select.selected.name'></span></ui-select-match>"+
"<ui-select-choices repeat='" + parsed.ngRepeat + "'>" +
"<span ng-bind-html='" + parsed.locals.displayFn + "'></span></ui-select-choices>";
this.inputEl.removeAttr('ng-options');
this.inputEl.append(html);
}
});
return dir;
}]);
Директива была сделана по образу и подобию стандартных директив xeditable, а потом немного переделана.
Одной из основных проблем, с которыми я столкнулся при написании директивы, была невозможность изменить модель, поэтому был добавлен дополнительный метод для on-select.
Использовать все это можно так:
<span
data-pk="{{ entity.id }}"
editable-ui-select="entity.property"
ng-model="entity.property"
e-ng-options="obj.id as obj.name for obj in objects | filter: $select.search track by obj.id"
e-form="rowform">
{{ entity.property.name }}
</span>
И напоследок бонус. Если использовать это дело в table-responsive (bootstrap), то выпадающий список может быть перекрыт таблицей (особенно, если она состоит из пары строк). Исправить это можно, добавив css:
.table-responsive .ui-select-dropdown {
position: relative !important;
}
Заключение. Вариантов реализации данной директивы может быть множество и наверняка среди них есть варианты лучше моего. Я опубликовал свои наработки только потому, что в официальной документации xeditable пока нету упоминания о поддержке ui-select, а также потому, что я нашел мало информации по теме, а та, что нашел, разнится между собой.
Надеюсь на то, что гуру ангуляра помогут мне улучшить мою директиву, а также на то, что кому-нибудь пригодится эта статья.
Автор: ivanuzzo
