Question

我有一个select2（ui-selecet），需要在没有结果或选择了所有选项时（多选）会出现一条消息和打开模态的选项。

当我点击按钮时，它不会打开模态并且不会执行该功能。

选择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。该示例使用容器元素来保存按钮，以便在编译后可以轻松追加，没有必要，您可以将其附加到<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 变量，该变量与变量 args 第3440行具有相同的参数。
接下来我使用此变量（_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'
        };

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

与AngularJS

2 个答案: