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

Question

如何将 bootstrap 模态对话框与 AngularJS 结合使用 ui-bootstrap 与 angular-ui-router？我是 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>

Answer 1

一种方法是使用 appendTo 选项：

来自文档：

$uibModal's open function

options parameter

• appendTo (Type: angular.element, Default: body: Example: $document.find('aside').eq(0)) - Appends the modal to a specific element.

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

有关详细信息，请参阅

• UI-Bootstap modal Directive API Reference