AngularJS + Select2 (Multiple - Tags) - иногда показывать теги другим не - PullRequest
Новая
       51

AngularJS + Select2 (Multiple - Tags) - иногда показывать теги другим не

0 голосов
/ 07 июня 2018

Я использую AngularJS + select2 (не ui-select).

Тогда, на мой взгляд, у меня есть: 

<select 
name="rubros" 
id="rubros" 
class="select2 form-control"
ng-model="vm.comercio.tags" 
ng-options="rubro.nombre for rubro in vm.rubros track by rubro.id"
multiple>
</select>

Как видите, выборка привязана к переменнойназываемый "comercio.tags", который представляет собой массив объектов.

Что ж, вот забавная вещь: теги иногда отображаются, а иногда нет.Хотя привязка работает.

И поведение случайное;Я могу нажать F5 в моем браузере, и ошибка появляется и появляется случайно.

Пожалуйста, взгляните на изображения:

enter image description here

enter image description here

enter image description here

Теги получены по запросу на получение ($ http).

Iне знаю, что здесь происходит.Поскольку поведение воспроизводится случайным образом.

Обновление:

Добавление кода, запрошенного помощником 

//controller initialization before this

var scope = this;

var id = $routeParams.id;   //the ID of the commerce/store I want to edit (preload) in the page

//variable where I save the retrievedcommerce/store
scope.comercio = {
    tags:[]
};

/*
    HTTP request to retrieve the commerce/store with "id"
    The model retrieved has a tags attribute that is correctly filled (as you can see in the images, 
    in the input on top of the select2, I used to debug)
*/

$http.get("http://localhost:8000/api/comercio/" + id).then(function (response) {

    scope.comercio = response.data.model;

},
function (response) {

    scope.comercio = null;

});

//other controllers instructions and declarations

1 Ответ

0 голосов
/ 07 июня 2018

Как и предполагали люди, причина этой проблемы заключается в том, что select2 - это плагин jQuery, и мы должны присоединить его к угловому циклу "refresh" / compile / digest / watch ... .. другими словами, нам нужноприсоедините select2 к жизненному циклу приложения angularJS.

Как нам это сделать?используя директиву.Официальная документация действительно обширна, но вы можете оценить решение с помощью этого небольшого куска кода. 

app.directive("appSelect2", function($timeout) {

    return {
        restrict: "A",
        link: function (scope, element, attrs) {
            jQuery(element).select2();

            scope.$watch(attrs.ngModel, function () {
                $timeout(function () {
                    element.trigger('change.select2');
                }, 100);
            });

        }
    };
});

С помощью этой директивы и добавления атрибута app-select2 к входу select2, объявленному в вашем html.... работает отлично.

Я очень ценю оказанную помощь, большое спасибо.

...