javascript - Angular 路由和 Bootstrap - 在不更改页面内容的情况下显示模式对话框？

Question

使用 Angular 路由和 Bootstrap。

如何在不更改页面内容的情况下显示模式对话框？

我尝试了这个，但浏览器(Chrome)一直卡住。

链接:

<a href="#Home">Home</a>
<a href="#postModal" role="button" data-toggle="modal">Post</a>
<a href="#Profile">Profile</a>

Angular :

<script>

var currentUrl="";
var currentCtrl="";

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
        .when("/Profile", {
            templateUrl : "london.html",
            controller : "londonCtrl"
        })
        .when("/postModal", {
            templateUrl : currentUrl,
            controller : currentCtrl
        })
        .otherwise({
            templateUrl : "paris.html",
            controller : "parisCtrl"
        });
});
app.controller("londonCtrl", function ($scope) {
    $scope.msg = "I love London";

    var init = function() {
        currentUrl  = "london.html";
        currentCtrl = "london.html";
    } ;
    init();

});
app.controller("parisCtrl", function ($scope) {
    $scope.msg = "I love Paris";

    var init = function() {
        currentUrl  = "paris.html";
        currentCtrl = "parisCtrl";
    } ;
    init();
});

对话框:

<div id="postModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            Update Status
        </div>
        <div class="modal-body">
            <form class="form center-block">
                <div class="form-group">
                    <textarea id="textareaPost"autofocus="autofocus" class="form-control input-lg" placeholder="What do you want to share?" ></textarea>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <div>
                <input type="radio" name="permission" value="Public" checked> Public
                <input type="radio" name="permission" value="Private"> Priavte
                <button class="btn btn-primary btn-sm" data-dismiss="modal" aria-hidden="true" onclick="onClickButtonPostSubmit();">Post</button>
                <ul class="pull-left list-inline">
                    <li><a href="" onclick="onClickPostUpload();"><i class="glyphicon glyphicon-upload"></i></a></li>
                    <!-- <li><a href=""><i class="glyphicon glyphicon-camera"></i></a></li>     -->
                    <!-- <li><a href=""><i class="glyphicon glyphicon-map-marker"></i></a></li> -->
                </ul>
            </div>
        </div>
    </div>
</div>

我做错了什么？也许有更好的方法..

谢谢

Answer 1

您的代码没问题，请删除您的浏览器历史记录并检查它

:)