AngularJS + Select2 (Multiple - Tags) - 有时显示其他标签

Question

我正在使用 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>

如您所见，select 绑定到名为 "comercio.tags" 的变量，这是一个对象数组。

好吧，有趣的是：标签有时显示，有时不显示。即使绑定有效。

并且行为是随机的；我可以在浏览器中按 F5 并随机出现错误。

请看图片：

通过获取请求 ($http) 检索标签。

我不知道这里发生了什么。因为行为是随机重现的。

更新：

添加助手成员请求的代码

//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

Answer 1

正如人们所说，这个问题的原因是因为 select2 是一个 jQuery 插件，我们必须将它附加到 angular "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" 属性添加到您的 html 中声明的 select2 输入 ... 它完美无缺。

非常感谢提供的帮助，非常感谢。

AngularJS + Select2 (Multiple - Tags) - 有时显示其他标签

AngularJS + Select2 (Multiple - Tags) - sometimes show tags others not

javascript

tags

angularjs

jquery-select2

jquery-select2-4