Angular Routing & Bootstrap - Zeigt einen modalen Dialog an, ohne den Inhalt der Seite zu ändern?

Question

Verwenden von Winkelrouten & Bootstrap.

Wie kann ich einen Modaldialog anzeigen, ohne den Inhalt der Seite zu ändern?

Ich habe das versucht, aber der Browser (Chrome) bleibt stecken.

Links:

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

Eckig:

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

Der Dialog:

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

Was mache ich falsch? Vielleicht gibt es einen besseren Weg ..

Dank

Answer 1

Ihr Code OK ist Ihre Browser-History entfernen und überprüfen Sie es

:)