我有一个about.html,它显示每列中的6个图像。当您单击个人配置文件时,将弹出(打开)新的弹出窗口,其中显示该个人的背景信息。这只是angularjs应用程序中的bootstrap硬编码。我一直试图创建angularjs模式弹出如下所示:
<div class = "container">
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#profile-1" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p class="p-hover">my profile...</p>
</div>
</div>
<img src="images/pic1.jpg" class="img-responsive" alt=""> </a>
<div class="portfolio-caption">
<p class="text-muted">Guitarist since 1977</p>
</div>
</div>
</div>
点击图片的图片后,这应该是弹出窗口中的内容:
<modal id="profile-1">
<div class="modal">
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-12">
<div class="modal-body">
<img src="images/pic1.jpg" alt="">
</div>
<div class=" col-xs-12 col-md-9">
<h6>consectetur adipisicing elit. </h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<button ng-click="vm.closeModal('profile-1');">Close</button>
</div>
</div>
</div>
</div>
</modal>
然后我根据此网站使用此控制器代码:angularjs custom modal
controller.js
`angular.module('RouteControllers', [])
.controller('AboutController', function($scope) {
function Controller(ModalService) {
var vm = this;
vm.openModal = openModal;
vm.closeModal = closeModal;
initController();
function initController() {
//vm.bodyText = 'This text can be updated in modal 1';
}
function openModal(id){
ModalService.Open(id);
}
function closeModal(id){
ModalService.Close(id);
}
}
我尝试过几种方法,但我认为此刻我只是感到困惑。任何有用的提示都很可爱。