使用 AngularJS 选择 2（没有结果匹配）

Question

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

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

选择 2 个组件：

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.: 我觉得应该是范围的问题，不知道怎么解决

有没有人有任何想法或解决方案？

Answer 1

您可能需要使用 $compile 来动态生成和编译按钮，以便 ng-click 有效地 attached/registered。该示例使用容器元素来容纳按钮，以便在编译后可以轻松地附加它，这不是必需的，您可以将它附加到 <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);
}

希望对您有所帮助！

Answer 2

嗯，我是这样解决的：

在组件 Select2.js 中，我进行了更改，因此它显示一个按钮并调用 OpenModal(this)函数。
我放了一个 _myOptions 变量，它获得与第 3440 行变量 args 相同的参数。
接下来我使用这个变量 (_myOptions) 并获取数据目标。
在控制器中，我创建了一个 $scope.select2Options，我在其中传递了在 Select2.js 中访问的模态目标

有了这个，当结果完成或没有结果时，会出现一条消息，当点击按钮时，它会打开模式。

ViewHTML:

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

使用 AngularJS 选择 2（没有结果匹配）

Select2 (no results match) with AngularJS

angularjs

jquery-select2

ui-select2