Я создал простую пользовательскую директиву AngularJs для этого удивительного плагина jquery jQuery-Select2 следующим образом:
Директива
app.directive("select2",function($timeout,$parse){
return {
restrict: 'AC',
link: function(scope, element, attrs) {
$timeout(function() {
$(element).select2();
},200);
}
};
});
Использование в HTML-шаблонах:
<select class="form-control" select2 name="country"
data-ng-model="client.primary_address.country"
ng-options="c.name as c.name for c in client.countries">
<option value="">Select Country</option>
</select>
Он работает как ожидалось, и мой обычный select элемент заменяется плагинами select2.
Однако есть одна проблема, хотя иногда она показывает значение по умолчанию i.e Select Country здесь, хотя в выпадающем меню автоматически выбирается значение модели.
Теперь, если я увеличиваю $timeout интервал от 200 до некоторого высокого значения, скажем 1500, он работает, но задерживает рендеринг директивы. Также я думаю, что это не является правильным решением для него, так как мои данные загружаются через ajax.
Я также попытался обновить директиву следующим образом, но в этом не повезло:
app.directive("select2",function($timeout,$parse){
return {
restrict: 'AC',
require: 'ngModel',
link: function(scope, element, attrs) {
var modelAccessor = $parse(attrs.ngModel);
$timeout(function() {
$(element).select2();
});
scope.$watch(modelAccessor, function (val) {
if(val) {
$(element).select2("val",val);
}
});
}
};
});
PS: Я знаю, что есть аналогичный модуль, присутствующий ui-select, но он требует некоторой разной разметки в форме <ui-select></ui-select>, и мое приложение уже полностью разработано, и я просто хочу заменить стандартный флажок select2.
Итак, можете ли вы, пожалуйста, направить меня, как я могу решить эту проблему и убедиться, что директива поддерживает синхронизацию с последним поведением?