Bootstrap Modal page.html不适用于ng-include

问题描述 投票：1回答：2

我在超链接上调用Bootstrap Modal。我的代码在“Master Page NavBar.html”中

 <a href="#myModal" data-toggle="modal">Login/SignUp</a>

这是我完成的代码“MasterPageNavBar.html”

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="../Content/bootstrap.css" rel="stylesheet" />
    <link href="../Content/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <link href="../Content/bootstrap-theme.css" rel="stylesheet" />
    <script src="../Scripts/angular-ui-router.js"></script>
    <script src="../Scripts/angular-ui-router.min.js"></script>
    <script src="../Scripts/Collapse.JS"></script>

</head>
<body>
    <div>
        <div>
            <h3>AngularJS Tutorial</h3> 
            <nav class="navbar  navbar-inverse">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-target="#mynavbar" data-toggle="collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>

                    </button>
                </div>
                <div class="collapse navbar-collapse" id="mynavbar">
                    <ul class="nav navbar-nav">
                        <li class="active"><a data-ui-sref="home">Home</a></li>
                        <li><a data-ui-sref="contactus">Contact</a></li>
                        <li><a href="">Gallery</a></li>
                        <li><a href="">About</a></li>
                    </ul>
                    <ul class="nav navbar-right navbar-nav">
                        <li>
                            <a href="#myModal" data-toggle="modal">Login/SignUp</a>

                                <!-- Modal HTML -->
                            <form>
                                <div id="myModal" class="modal fade">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                <h4 class="modal-title">Confirmation</h4>
                                            </div>
                                            <div class="modal-body form-group">
                                                <input style="margin-bottom:15px" type="text" class="form-control " placeholder="User Name ---" />
                                                <input style="margin-bottom:5px" type="text" class="form-control " placeholder="Password" />
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">Login</button>
                                                <button type="button" class="btn btn-primary">Cancel</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </li>
                 </ul>
                </div>

            </nav>
        </div>

    </div>
</body>
</html>

当我单独运行此页面时，Modal工作正常。这是模型的输出。 enter image description here

到这里代码很好。

我的问题在这里

我在另一个页面中调用“MasterPageNavBar.html”页面“index.html”。这是我的“Index.html”代码（这是我的开始页面）。

**<div ng-include="'../Views/MasterPageNavBar.html'"></div>**

<div ng-include="'../Views/ContentPage.html'"></div>

通过运行“Index.html”页面无法运行模态窗口。

enter image description here

有一件事我注意到“当点击登录链接'UI-Route功能正常工作'时，它正在寻找一个myModel页面而它找不到。下面是我的ui.route模块。（我不想打电话这个ui.rotuer点击登录链接。

 **<a href="#myModal" data-toggle="modal">Login/SignUp</a>**

enter image description here

  var myrouting=angular.module('routingDemoApp', ['ui.router'])
    myrouting.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        // For any unmatched url, send to /business
        $urlRouterProvider.otherwise("", "/index")

        $stateProvider
                .state('index', {
                    url: "/index",
                    templateUrl: "../Views/home.html"
                })
                .state('contactus', {
                    url: "/contactus",
                    templateUrl: "../Views/contactus.html",

                })

                 .state('home', {
                     url: "/home",
                     templateUrl: "../Views/home.html",
                 })
angularjs twitter-bootstrap bootstrap-modal
2个回答
0
投票

您可以使用ng-click打开您的模式，如下所示：

<a href="#" ng-click="openModal()" data-toggle="modal">Login/SignUp</a>

在您的控制器中编写以下代码：

$scope.openModal= function(){ $("#myModal").modal("show"); }

我希望它会对你有所帮助

0
投票

最好的办法是使用Bootstrap支持的data-target属性（http://getbootstrap.com/javascript/#via-data-attributes）。像data-target="#myModal"一样使用它并删除href=""。然后Angular不会尝试导航到它。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.