如何將控制器傳遞到模態視圖

Question

我一直在這個不健康的時間長度。最初，modal.open只會使屏幕變暗而不會出現任何對話框。然後我用windowTemplateUrl來覆蓋templeteUrl並顯示出來。 現在控制器沒有任何東西通過; cancel（）函數和API中的數據似乎都不起作用。任何可能的解決方案將非常受歡迎。

(function() { 
 
    angular 
 
    .module('loc8rApp') 
 
    .controller('locationDetailCtrl', locationDetailCtrl); 
 

 
    locationDetailCtrl.$inject = ['$routeParams', '$uibModal', 'loc8rData']; 
 
    
 
    function locationDetailCtrl($routeParams, $uibModal, loc8rData) { 
 
    var vm = this;  
 
    vm.locationid = $routeParams.locationid; 
 

 
    loc8rData.locationById(vm.locationid) 
 
     .success(function(data) { 
 
     vm.data = { 
 
      location: data 
 
     } 
 
     vm.pageHeader = { 
 
      
 
      title: vm.data.location.name 
 
     }; 
 
     }) 
 
     .error(function(e) { 
 
     console.log(e); 
 
     }); 
 

 
    vm.popupReviewForm = function() { 
 
     var modalInstance = $uibModal.open({ 
 

 
     templateUrl: "/reviewModal/reviewModal.view.html", 
 
     backdrop: true, 
 
     //windowClass: 'show', 
 
     windowTemplateUrl: "/reviewModal/reviewModal.view.html", 
 
     controller: 'reviewModalCtrl as vm', 
 
     //size: 'sm', 
 
     resolve: { 
 
      locationData: function() { 
 
      return { 
 
       locationid: vm.locationid, 
 
       locationName: vm.data.location.name 
 
      }; 
 
      } 
 
     } 
 
     }); 
 
    }; 
 
    } 
 
})(); 
 

 

 

 
//modal controller 
 
(function() { 
 
    angular 
 
    .module('loc8rApp') 
 
    .controller('reviewModalCtrl', reviewModalCtrl); 
 

 
    reviewModalCtrl.$inject = ['$uibModalInstance', 'locationData']; 
 

 
    function reviewModalCtrl($uibModalInstance, locationData) { 
 
    var vm = this; 
 
    vm.locationData = locationData 
 

 
    //create vm.modal.cancel() method and use it to call $modalInstance.dismiss method 
 
    vm.modal = { 
 
     cancel: function() { 
 
     $uibModalInstance.dismiss('cancel'); 
 
     } 
 
    }; 
 
    } 
 
})();

<div class="container modal-content"> 
 
    <form id="addReview" name="addReview" role="form" class="form-horizontal"> 
 
    <div class="modal-header"> 
 
     <button type="button" ng-click="vm.modal.cancel()" class="close"><span aria-hidden="true">x</span><span class="sr-only">Close</span></button> 
 
     <h4 id="myModalLabel" class="modal-title">Add your review for {{ vm.locationData.locationName }}</h4> 
 
    </div> 
 
    <div class="modal-body"> 
 
     <div class="form-group"> 
 
     <label for="name" class="col-xs-2 col-sm-2 control-label">Name</label> 
 
     <div class="col-xs-10 col-sm-10"> 
 
      <input id="name" name="name" required="required" ng-model="vm.formData.name" class="form-control" /> 
 
     </div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="rating" class="col-xs-10 col-sm-2 control-label">Rating</label> 
 
     <div class="col-xs-12 col-sm-2"> 
 
      <select id="rating" name="rating" ng-model="vm.formData.rating"> 
 
         <option>5</option> 
 
         <option>4</option> 
 
         <option>3</option> 
 
         <option>2</option> 
 
         <option>1</option> 
 
        </select> 
 
     </div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="review" class="col-sm-2 control-label">Review</label> 
 
     <div class="col-sm-10"> 
 
      <textarea id="review" name="review" rows="5" required="required" ng-model="vm.formData.reviewText" class="form-control"></textarea> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="modal-footer"> 
 
     <button ng-click="cancel()" type="button" class="btn btn-default">Cancel</button> 
 
     <button type="submit" class="btn btn-primary">Submit</button> 
 
    </div> 
 
    </form> 
 
</div>

Answer 1

我用這樣的，在應用程序的rootController我有這樣的：

$rootScope.openMsgModal = function (modalSettings) { 
      var defaultSettings = { 
       title: "Title", 
       msg: "Message", 
       icon: "fa-info-circle", 
       iconColor: "#c83637", 
       clickAction: "ok", 
       isCancelVisible: false, 
       templateUrl: 'views/templates/popups/alertMessage.html', 
       controller: 'ModalAlertController', 
       translations: { 
        confirmButton: "common.button_confirm", 
        cancelButton: "common.button_cancel" 
       } 
      } 
      angular.extend(defaultSettings, modalSettings); 
      var modalInstance = $uibModal.open({ 
       templateUrl: defaultSettings.templateUrl, 
       controller: defaultSettings.controller, 
       size: 'md', 
       resolve: { 
        modalSettings: function() { 
         return defaultSettings; 

        } 
       } 
      }); 

      return modalInstance; 

     }; 

    } 

......然後，在這裏我需要使用模式我有這樣的：

var modalInstance = $uibModal.open({ 
     animation: true, 
     templateUrl: 'views/templates/popups/alertMessage.html', 
     controller: 'ModalAlertController', 
     resolve: { 
      modalSettings: function() { 
       angular.extend(defaultSettings, modalSettings); 
       return defaultSettings; 
      } 
     } 
    });