Question

我已经在这个问题上度过了一段不健康的时光。最初，modal.open只会使屏幕变暗，而不会出现任何对话框。然后我使用windowTemplateUrl来覆盖templeteUrl并显示。现在控制器没有任何东西通过; cancel（）函数和API中的数据似乎都不起作用。任何可能的解决方案都将非常受欢迎。

＆＃13;

(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');
      }
    };
  }
})();

＆＃13;

<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>

＆＃13;

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;
            }
        }
    });

如何将控制器传递给模态视图

1 个答案: