Как я могу передать изменения параметров в Angular-UI ui-select2?

документация ui-select2 показывает, что вы можете сделать что-то вроде следующего:

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, когда они изменялись.

Мне нужно динамически изменять maxSelectionSize в зависимости от того, что выбрано, и делать что-то вроде следующего, очевидно, неправильно, поскольку вам не следует возиться с 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 });
    }
}

Как я могу передать эти типы опций в select2 без использования DOM и смешивания проблем в моем контроллере? (Я не мог придумать чистый способ сделать это с помощью директивы.)

Спасибо!

Обновление:

Основываясь на https://stackoverflow.com/a/16962249/405026, ответе Стьюи и моем собственном тестировании, которое я добавил следующий код в метод ссылки 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 может быть либо литералом объекта, либо объектом в области видимости?


angularjs jquery-select2 angular-ui
person Nate Bundy    schedule 27.06.2013    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Директива ui-select2 не предоставляет API для этого «из коробки», поэтому вам придется настроить директиву в соответствии с вашими потребностями, добавив $watcher в атрибут select2 (внутри функции связывания директивы):

scope.$watch(attrs.uiSelect2, function(opts) {
  elm.select2(opts);
}, true);
person Stewie    schedule 27.06.2013
comment
Спасибо, Стьюи. Я пошел по этому пути, но теперь у меня возникают проблемы с тем, как поддерживать синтаксис ui-select2={maximumSelectionSize: 0} и ui-select2=select2Options одновременно. Я хотел бы превратить это в запрос на вытягивание, но сначала мне нужно выяснить, является ли attrs.uiSelect2 литералом объекта или ссылкой на что-то в области, и я не уверен, как это сделать. - person Nate Bundy; 28.06.2013
comment
Если мы сможем выяснить, как определить, действительно ли attrs.uiSelect2 можно наблюдать и только в области видимости. $watch, если это так, я с радостью приму ваш ответ! Спасибо еще раз. - person Nate Bundy; 28.06.2013