如何将选项更改传递给 Angular-UI ui-select2? [英] How can I pass option changes to Angular-UI ui-select2?

问题描述

angular-ui 的 ui-select2 文档 表明您可以执行以下操作以下:

angular-ui's ui-select2 documentation shows that you can do something like the following:

myAppModule.controller('MyController', function($scope) {
    $scope.select2Options = {
        allowClear:true
    };
});

<select ui-select2="select2Options" ng-model="select2">
    <option value="one">First</option>
    <option value="two">Second</option>
    <option value="three">Third</option>
</select>

但是，在那之后对 $scope.select2Options 的更改没有任何作用.如果 ui-select2 在这种情况下观察 select2Options 的变化，并在它们发生变化时将它们发送到 select2，那就太好了.

However, changes to $scope.select2Options after that point do nothing. It would be nice if ui-select2 would watch select2Options for changes in that case and send them to select2 when they change.

我需要根据选择的内容动态更改 maximumSelectionSize，并且执行以下操作显然是错误的做法，因为您不应该弄乱控制器中的 DOM.

I need to dynamically change maximumSelectionSize depending on what's selected, and doing something like the following is obviously the wrong thing to do since you shouldn't be messing with the DOM in a controller.

<select id="mySelect2" ui-select2="{ allowClear: true}" ng-model="select2" ng-change="selectChange()">
    <option value="one">First</option>
    <option value="two">Second</option>
    <option value="three">Third</option>
</select>

内部控制器:

$scope.selectChange = function() {
    if(...) {
        $("#mySelect2").select2({ maximumSelectionSize: 1 });
    } else {
        $("#mySelect2").select2({ maximumSelectionSize: 0 });
    }
}

如何在不使用 DOM 和在控制器中混合关注点的情况下将这些类型的选项传递给 select2?(我无法通过指令想出一种干净的方法来做到这一点.)

How can I pass those types of options through to select2 without using the DOM and mixing concerns in my controller? (I couldn't come up with a clean way to do this via a directive.)

谢谢！

更新:

基于 https://stackoverflow.com/a/16962249/405026、Stewie 的回答和我自己的测试我在 angular-ui ui-select 的链接方法中添加了以下代码:

Based on https://stackoverflow.com/a/16962249/405026, Stewie's answer, and my own testing I've added the following code to angular-ui ui-select's link method:

try {
    scope.uiSelect2 = angular.fromJson(attrs.uiSelect2);
} catch(e) {
    scope.$watch(attrs.uiSelect2, function (opts) {
        if (!opts) return;
        elm.select2(opts);
    }, true);
}

是否有更好的方法来处理 ui-select2 属性可能是对象字面量或作用域上的对象的情况?

Is there a better way of handling the case where the ui-select2 attribute may be either an object literal or an object on the scope?

推荐答案

ui-select2 指令不提供此开箱即用的 API，因此您必须自定义指令以满足您的需求在 select2 属性上添加 $watcher(在指令链接函数内):

ui-select2 directive does not provide an API to this out-of-the-box, so you'd have to customize the directive to suit your needs by adding a $watcher on the select2 attribute (inside the directive linking function):

scope.$watch(attrs.uiSelect2, function(opts) {
  elm.select2(opts);
}, true);

这篇关于如何将选项更改传递给 Angular-UI ui-select2?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！