个人中心
gpt4 book ai didi

javascript - UI 模式对话框被添加到新的 DIV 标签

转载 作者：太空宇宙 更新时间：2023-11-03 17:46:20 25 4
gpt4 key购买 nike

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

主应用程序 Controller 

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

局部 View 

    <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>

模式 HTML

    <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-repeat div 之外创建的，如何控制模态以便我可以在 ng-repeat div 中获取模态。

例如:

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

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

关于javascript - UI 模式对话框被添加到新的 DIV 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28075578/

25 4 0
文章推荐： css - DataTable 中未对齐的行与 Primefaces 5.0 JSF 2.2 中的卡住列
文章推荐： c# - 定义类的属性
文章推荐： c# - 这种语法有什么问题？
文章推荐： jquery - slider slider 未对齐？