Select2（没有结果匹配）与 AngularJS答案

【问题标题】：Select2 (no results match) with AngularJSSelect2（没有结果匹配）与 AngularJS
【发布时间】：2017-05-17 19:10:45
【问题描述】：

我有一个select2（ui-selected），需要当没有结果或所有选项都被选择（多选）时会出现一条消息和打开模式的选项。

当我点击按钮时，它不会打开模式，也不会执行功能。

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>

Obs.：我觉得应该是范围的问题，但是不知道怎么解决。

有人有什么想法或解决方案吗？

【问题讨论】：

标签： angularjs jquery-select2 ui-select2

【解决方案1】：

您可能需要使用$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);
}

希望对您有所帮助！

【讨论】：

它没有用，它们看起来像是在两个不同的范围（RootScope和Scope）中，我将尝试通过DOM对其进行操作并注入命令以打开Modal；但是非常感谢您的帮助。

【解决方案2】：

好吧，我设法像这样解决它：

在组件 Select2.js 中我进行了更改，使其显示一个按钮并调用 OpenModal(this) 函数。
李>
我放置了一个 _myOptions 变量，该变量的参数与第 3440 行的变量 args 相同。
接下来我使用这个变量 (_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'
        };

模态指令：

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

【讨论】：