AngularJS UI-Bootstrap模态对话框被main.htm覆 盖

问题描述 投票:0回答:1

enter image description here

我如何通过ui-bootstrap和angular-ui-router在AngularJS中使用引导模式对话框。我是AngularJS的新手,并尝试在没有运气的情况下搜索文档。

我已经使用了这段代码,但是后面的内容被覆盖了:我的main.html:

<form class="navbar-form">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search...">
        <span class="input-group-btn">
        <button type="submit" class="btn btn-default">
            <img src="img/dsd.png" style="width: 17px">
        </button>
    </span>
    </div>
    <a class="btn btn-success" ui-sref="app.login">Login</a>
    <a class="btn btn-danger" ui-sref="app.register">Regiter</a>
</form>

我的app.js:

angular.module("myApp",["ngAnimate","ngSanitize","ui.router","ui.bootstrap","mds"])

.config(function ($stateProvider,$urlRouterProvider) {
    $stateProvider
    .state("app",{
        url:"/app",
        views:{
            main:{
                templateUrl:"templates/main.html",
                controller:"appCtrl"
            }
        }
    })

    .state("app.register",{
        url:"/register",
        views:{
            sub:{
                templateUrl:"templates/register.html",
                controller:"registerCtrl"
            }
        }
    })

我的模态:

<div id="y" class="modal-dialog">
    <div>
        <div class="modal-content">
            <div class="modal-header btn-danger">
                <a href="#" class="close" data-dismiss="modal" style="color: black;font-size: 20px;font-weight: bold">x</a>
                SignUp
            </div>
            <div class="modal-body">
                <form ng-submit="register()">
                    <div class="form-group">
                        <label>Full Name</label>
                        <input type="text" class="form-control" ng-model="Name" required>
                    </div>
                    <div class="form-group">
                        <label>User Name</label>
                        <input type="text" class="form-control" ng-model="UserName" required>
                    </div>
                    <div class="form-group">
                        <label>Phone Number</label>
                        <input type="tel" class="form-control" ng-model="Phone" required>
                    </div>
                    <div class="form-group">
                        <label>Full Address</label>
                        <textarea class="form-control" ng-model="addr" required></textarea>
                    </div>
                    <div class="form-group">
                        <label>Email address:</label>
                        <input type="email" class="form-control" ng-model="Email" required>
                    </div>
                    <div class="form-group">
                        <label>Password:</label>
                        <input type="password" class="form-control" ng-model="Pwd" required>
                    </div>
                    <div class="checkbox">
                        <label><input type="checkbox"> Remember me</label>
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
            </div>
            <div class="modal-footer">
                Sudan Store.
            </div>
        </div>
    </div>
</div>
angularjs angular-ui-router bootstrap-modal angular-ui-bootstrap angular-ui
1个回答
0
投票

一种方法是使用appendTo选项:

来自文档:

[$uibModal的打开功能

选项参数

  • [appendTo (Type: angular.element, Default: body: Example: $document.find('aside').eq(0))-将模态附加到特定元素。

使用appendTo选项附加到将完全可见的元素。

有关更多信息,请参阅

© www.soinside.com 2019 - 2024. All rights reserved.