Angularjs bootstrap模式弹出不起作用

时间:2017-08-22 14:14:36

标签: html angularjs bootstrap-modal

我有一个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);
   }
}

我尝试过几种方法,但我认为此刻我只是感到困惑。任何有用的提示都很可爱。

0 个答案:

没有答案