使用 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>
我做错了什么? 也许有更好的方法..
谢谢
最佳答案
您的代码没问题,请删除您的浏览器历史记录并检查它
:)
关于javascript - Angular 路由和 Bootstrap - 在不更改页面内容的情况下显示模式对话框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38429499/