如何在AngularJS中监听select2事件

Question

select2提供了一些自定义事件，我希望能够听到它们，特别是'select2-removed'或更好的是它的自定义'change'事件，我一直在互联网上搜索一些例子，但没有运气。

到目前为止我所做的是:

HTML:

<input type="hidden" class="form-control" id="tags" ui-select2="modal.tags" data-placeholder="Available Tags" ng-model="form.tags">

JavaScript(角)

$scope.form = {tags: []};
postalTags = [
  {
    id: 1,
    text: 'Permanent Address'
  },
  {
    id: 2,
    text: 'Present Address'
  }
];
$scope.modal {
  tags: {
    'data': postalTags,
    'multiple': true
  }
};
// I doubt this is going to work, since i think this is only going to 
// listen on events emitted by $emit and $broadcast.
$scope.$on('select2-removed', function(event) {
    console.log(event);
});
// I can do this, but then i will not know which was removed and added
$scope.$watch('form.tags', function(data) {
  console.log(data);
});

用户实际上在这里做的是编辑标记到他/她地址的标签，我的意思是用户可以标记新的标签到他/她的地址或删除以前标记的标签。这就是为什么我需要跟踪哪些标签被添加，哪些被删除。

我在这个讨论中看到了一个合理的解决方案，但是我不能使所提供的代码与我的代码一起工作，所以我做了一些变通，这就是我所做的。

所以不加

scope.$emit('select2:change', a);

就在这里，

elm.select2(opts);
// Set initial value - I'm not sure about this but it seems to need to be there
elm.val(controller.$viewValue)

我把它放在这里，

 if (!isSelect) {
        // Set the view and model value and update the angular template manually for the ajax/multiple select2.
        elm.bind("change", function (e) {
          // custom added.
          scope.$emit('select2:change', e);
          e.stopImmediatePropagation();

然后我在控制器上做了常规操作，

$scope.$on('select2:change', function(event, element) {
  if(element.added) console.log(element.added);
  if(element.removed) console.log(element.removed);
}

并且工作得很好。

但我怀疑这是不是一个好主意，我仍然希望有一个更好的解决方案。

Answer 1

我使用了一个指令来封装select，然后在link函数中我只检索select元素和事件处理程序。

标记:

<select name="id" data-ng-model="tagsSelection" ui-select2="select2Options">
    <option value="{{user.id}}" data-ng-repeat="user in users">{{user.name}}</option>
</select>

Javascript:

link: function (scope, element, attributes) {
    var select = element.find('select')[0];
    $(select).on("change", function(evt) {
        if (evt.added) {
            // Do something
        } else if (evt.removed) {
            // Do something.
        }
    });
    $scope.select2Options = {
        multiple: true
    }
}