如何传递选项更改为角的UI界面，选择2？ [英] How can I pass option changes to Angular-UI ui-select2?

问题描述

角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这一点后，什么也不做。这将是很好，如果用户界面，选择2会看select2Options在这种情况下，改变，并送他们时，他们改变选择2。

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 });
    }
}

如何通过对SELECT2通过这些类型的选项，而不使用DOM和混合在我的控制器的担忧？ （我不能拿出一个干净的方式通过一项指令来做到这一点。）

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.)

谢谢！

更新：

根据 http://stackoverflow.com/a/16962249/405026 ，的Stewie的回答，和我自己的测试我已经添加了以下code到角的UI用户界面，选择的链接方式：

Based on http://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);
}

是那里的用户界面，选择2属性可以是对象文本或范围对象的办案更好的办法？

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属性$观察家（指令链接功能中）：

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);

这篇关于如何传递选项更改为角的UI界面，选择2？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！