将 UI 模式对话框添加到新的 DIV 标记

UI modal dialog getting added to a new DIV tag

本文关键字：DIV 标记 添加 UI 模式 对话框      更新时间：2023-09-26

这对你们来说可能是一个简单的问题，但对于像我这样的新手来说，这真的很困难。我有几个通过 ng-repeat 创建的div，当我单击div 时，我希望看到一个包含一些内容的模态窗口。现在我能够让弹出窗口和数据工作，但是它不是显示在div 中的模态窗口，而是创建自己的div。我将模态窗口用作单独的模块，并将其注入到我的控制器中。

主应用控制器 

 var app = angular.module('MainApp', ['ngRoute','ui.bootstrap','mddmodal']);
    app.controller('MddController',function ($scope, $interval, $modal, $log) {
            $scope.showInfo = function (index) {
                var exchangeCode = $scope.entries[index];
                console.log( ">>>>>>> showInfo " + index );
                $scope.open( 'sm', index );
            }
            $scope.hideInfo = function (index) {
                var exchangeCode = $scope.entries[index];
                /*$scope.modalInstance.dismiss('cancel');*/
            }
            $scope.items = [];
            $scope.open = function (window_size, index ) {
                console.log("Clicked on open +++++ " + window_size + " index " + index );
                $scope.items.push( "index" + index );
                $scope.modalInstance = $modal.open({
                    templateUrl: 'scripts/controllers/_mdd_modal_impl.html',
                    controller: 'ModalInstanceCtrl',
                    size: window_size,
                    resolve: {
                        items: function () {
                            return $scope.items;
                        }
                    }
                });
        };

局部视图

    <div class="padding-from-sides" >
        <div class="row top-buffer" ng-show="dataLoaded">
            <div ng-repeat="entry in entries" ng-model="entry" class="col-md-1" ng-click="showInfo($index)" ng-mouseleave="hideInfo($index)">
                <!--{{entry.errors}}-->
                <div square-draw component-id="entry.exchangeCode" component-name="entry.exchangeName" ></div>
            </div>
        </div>
    </div>
   </div>

模态网页

    <body ng-app='mddmodal'>
<div>
    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <table>
            <tr>
                <td ng-repeat="item in items">
                    <li>
                        <a ng-click="selected.item = item">{{ item }}</a>
                    </li>
                </td>
            </tr>
        </table>
        Selected: <b>{{ selected.item }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
    <!--    <div ng-show="selected">Selection from a modal: {{ selected }}</div>-->
</div>
</body>

模态 JS

var mdd_modal = angular.module('mddmodal',['ui.bootstrap']);
mdd_modal.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
    $scope.items = items;
    $scope.selected = {
        item: $scope.items[0]
    };
    $scope.ok = function () {
        $modalInstance.close($scope.selected.item);
    };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});

我现在面临的问题是模态的弹出窗口是在 ng-repeatdiv 之外创建的，我如何控制模态以便我可以在 ng-repeatdiv 内获取模态。

例如：

<ng repeat div>
    one entry of the square draw directive
    modal on click
<close div>

提前感谢！

第三方应用程序擅长将东西放在意想不到的地方。 我使用第三方弹出窗口 （ColorBox） 来创建它工作所需的 2 个div，但是在 ASP.NET Web 应用程序中，它将这些元素放在表单之外。 因此，为了使代码正常工作，我必须根据他们的常见问题添加此内容，以重新定位有问题的div：

$(document).ready(function () {
    $("#colorbox, #cboxOverlay").appendTo('form:first');
});

类似的东西可能对你有用。

相关文章：