Select2 (нет совпадения результатов) с AngularJS

У меня есть select2 (ui-selecet), и мне нужно, чтобы при отсутствии результата или выборе всех параметров (множественный выбор) отображалось сообщение и возможность открыть модальное окно.

Когда я нажимаю на кнопку, он не открывает модальное окно и не выполняет функцию.

Компонент Select2:

formatNoMatches: function () {
return "Nenhum resultado encontrado. <button type='button' class='btn btn-default' ng-click='modalOpen()'>" + "Cadastrar" + "</button>";
}

Выберите2 вид:

<select ui-select2="select2Options" multiple="multiple" ng-model="select" style="width: 100%" data-placeholder="Selecione uma pessoa">`
<option value=""></option>
<option ng-repeat="person in people" value="{{person}}">{{person.name}}</option>
</select>

Обс.: Я думаю, что это должен быть вопрос масштаба, но я не знаю, как его решить.

Может у кого есть идеи или решения?


angularjs jquery-select2 ui-select2
person Luan Menezes    schedule 17.05.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Скорее всего, вам потребуется использовать $compile для динамического создания и компиляции кнопки, чтобы ng-click было эффективно прикреплено/зарегистрировано. В примере используется элемент-контейнер для удержания кнопки, чтобы ее можно было легко добавить после компиляции, в этом нет необходимости, вы можете добавить ее к <body> или любому другому элементу DOM.

Вам нужно будет ввести $document и $compile, чтобы это сработало.

HTML:

<!-- some container to append generated button to -->
<div id="foo"></div>

JS:

formatNoMatches: function () {
    // some container element to hold the dynamically generated button
    var $container = angular.element($document[0].getElementById('foo'));

    // button markup as angular element wrapped in jqLite
    var button = angular.element('<button type="button" class="btn btn-default" ng-click="modalOpen()">Cadastrar</button>');

    // compile using angular's $compile service
    button = $compile(button)($scope);

    // append the button into the container
    $container.empty().append(button);
}

Надеюсь, это поможет!

person Alexander Staroselsky    schedule 17.05.2017
comment
Это не сработало, они выглядят так, как будто находятся в двух разных областях (RootScope и Scope), я попытаюсь манипулировать ими с помощью DOM и ввести команду для открытия Modal; Но большое спасибо за помощь. - person Luan Menezes; 18.05.2017

arrow_upward
0
arrow_downward

Ну, мне удалось решить это так:

  • В компоненте Select2.js я внес изменения, чтобы он отображал кнопку и вызывал функцию OpenModal(this).

  • Я добавил переменную _myOptions, которая получает те же аргументы, что и переменная args в строке 3440.

  • Затем я использую эту переменную (_myOptions) и получаю цель данных.

  • В контроллере я создал $scope.select2Options, куда передаю модальную цель, доступ к которой осуществляется в Select2.js.

При этом, когда результаты заканчиваются или их нет, появляется сообщение, а при нажатии кнопки открывается модальное окно.

ВидHTML:

<select ui-select2="select2Options" data-target="#animal" id="select2Callback" multiple="multiple" ng-model="person" >
                            <option value=""></option>
                            <option ng-repeat="person in people" value="{{person}}">{{person.name}}</option>
                        </select>

Компонент Select2.js:

formatNoMatches: function () {
        var target = _myOptions[0].target;
        return "Nenhum resultado encontrado. <button type='button' class='btn btn-default' data-toggle='modal' "+
               "data-target='"+target+"' onClick='openModal(this)'> Cadastrar </button>";
    }

Контроллер:

$scope.select2Options = {
            allowClear: true,
            multiple: true,
            target: '#teste'
        };

ModalDirective:

angular.module('modalDirectives', [])
    .directive('modal', function () {
        var ddo = {};
        ddo.restrict = "E";
        ddo.transclude = true;
        ddo.scope = {
            modalid: '@',
            title: '@'
        };
        ddo.templateUrl = "/app/js/directives/modal.html";
        return ddo;
    })
person Luan Menezes    schedule 19.05.2017