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>
私は間違っていますか? おそらくより良い方法があります。..
おかげ
あなたが直面している問題は何ですか?また角度uiルータはナビゲーション用です。モーダルウィンドウに使用しますか? – brk
私はナビゲーションを使用する必要があります。しかし、私がブートストラップモデルダイアログを使うと、ナビゲーションは.. –