2016-07-18 4 views
1

角度ルーティングの使用&ブートストラップ。角度ルーティングとブートストラップ - ページの内容を変更せずにモーダルダイアログを表示しますか?

ページの内容を変更せずにモーダルダイアログを表示するにはどうすればよいですか?

私はこれを試しましたが、ブラウザ(Chrome)が詰まっています。

リンク:

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

角度:

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

私は間違っていますか? おそらくより良い方法があります。..

おかげ

+1

あなたが直面している問題は何ですか?また角度uiルータはナビゲーション用です。モーダルウィンドウに使用しますか? – brk

+1

私はナビゲーションを使用する必要があります。しかし、私がブートストラップモデルダイアログを使うと、ナビゲーションは.. –

答えて

0

あなたのコードはOK、あなたのブラウザの履歴を削除し、それを

をチェックしている:)

+1

に変更されました。悲しいことに、何も変わっていません。ダイアログのhrefをクリックすると、タブがフリーズします。 。 –

関連する問題