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

Posted 2023-05-07

【中文标题】如何将选项更改传递给 Angular-UI ui-select2？

【英文标题】：How can I pass option changes to Angular-UI ui-select2?

【发布时间】：2013-06-25 13:07:52

【问题描述】：

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://***.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 属性可能是对象字面量或作用域上的对象的情况？

【参考方案1】：

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

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

【讨论】：

谢谢 Stewie。我已经走上了这条路，但现在我遇到了如何同时支持他们的 ui-select2=" maximumSelectionSize: 0" 和 ui-select2="select2Options" 语法的麻烦。我想把它变成一个拉取请求，但首先我需要弄清楚 attrs.uiSelect2 是对象文字还是对范围内某些东西的引用，我不知道该怎么做。

如果我们能弄清楚如何判断 attrs.uiSelect2 是否是可以实际观看的东西并且只有 scope.$watch 如果是的话，我很乐意接受您的回答！再次感谢。