Question

angular-ui ui-select2 documentation表示您可以执行以下操作：

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，那就太好了。

我需要根据所选内容动态更改maximumSelectionSize，并且执行类似下面的操作显然是错误的，因为您不应该在控制器中弄乱DOM。

<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？（我无法通过指令想出一个干净的方法。）

谢谢！

更新

根据https://stackoverflow.com/a/16962249/405026，Stewie的回答以及我自己的测试，我将以下代码添加到angular-ui ui-select的链接方法中：

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

是否有更好的方法来处理ui-select2属性可能是对象文字还是范围内的对象的情况？

Answer 1

ui-select2指令不提供这种开箱即用的API，因此您必须通过在select2属性上添加$ watcher来自定义指令以满足您的需求（在指令链接函数内））：

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

如何将选项更改传递给Angular-UI ui-select2？

1 个答案: