Блог

Я создал общую модальную службу в своем приложении. Но это как-то не работает. В этом плунжере отсутствует какая-то мелочь, но я не могу понять.

На основе переданного параметра либо откроется диалоговое окно с ошибкой, либо диалоговое окно отмены.

Найти PLUNKER здесь

Вот JS

     // create angular app
var validationApp = angular.module('validationApp', ['ui.bootstrap']);

// create angular controller
validationApp.controller('mainController', function($scope, ModalService) {

  var vm = this;
  // function to submit the form after all validation has occurred          
  vm.submitForm = function() {


    // check to make sure the form is completely valid
    if ($scope.userForm.$valid) {
      alert('our form is amazing');
    }

  };

  function openDialog() {
    alert('why am not showing');
    ModalService.openModal('Analysis Error', 'Complete Application Group configuration prior to running analysis.', 'Error');
  }

});
//controller fot dialog
validationApp.controller('ErrorDialogCtrl',
  function($uibModalInstance, message, title, callback) {
    alert('sfdsfds');
    var vm = this;
    vm.message = message;
    vm.onOk = onOk;
    vm.onContinue = onContinue;
    vm.onDiscard = onDiscard;
    vm.callback = callback;
    vm.title = title;

    function onOk() {
      $uibModalInstance.close();
    }

    function onContinue() {
      $uibModalInstance.close();
    }

    function onDiscard() {
      vm.callback();
      $uibModalInstance.close();
    }
  });
// common modal service
validationApp.service('ModalService',
  function($uibModal) {

    return {
      openModal: openModal
    };

    function openErrorModal(title, message, callback) {
      $uibModal.open({
        templateUrl: 'ErrorDialog.html',
        controller: 'ErrorDialogCtrl',
        controllerAs: 'vm',
        backdrop: 'static',
        size: 'md',
        resolve: {
          message: function() {
            return message;
          },
          title: function() {
            return title;
          },
          callback: function() {
            return callback;
          }
        }
      });
    }

    function openCancelModal(title, message, callback) {
      $uibModal.open({
        templateUrl: 'CancelDialog.html',
        controller: 'ErrorDialogCtrl',
        controllerAs: 'vm',
        backdrop: 'static',
        size: 'md',
        resolve: {
          message: function() {
            return message;
          },
          title: function() {
            return title;
          },
          callback: function() {
            return callback;
          }
        }
      });
    }

    function openModal(title, message, modalType, callback) {
      if (modalType === "Error") {
        openErrorModal(title, message, callback);
      } else {
        openCancelModal(title, message, callback);
      }
    }
  }
);
 

Открытие диалогового окна в HTML

 <div class="col-sm-6">
  <button type="submit" class="btn btn-primary" ng-click="openCancelDialog()">Open Cancel Dialog</button>
  <button type="submit" class="btn btn-primary" ng-click="openErrorDialog()">Open Error Dialog</button>
 </div>
 

Отменить диалог HTML

 <div>
    <div class="modal-header">
        <h3 class="modal-title">{{vm.title}}</h3>
    </div>
    <div class="modal-body">
        <p ng-bind-html="vm.message"></p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="vm.onContinue()" id="continue">Continue</button>
        <button class="btn btn-primary" ng-click="vm.onDiscard()" id="discard">Discard</button>
    </div>
</div>
 

Ошибка diaog HTML

 <div>
    <div class="modal-header">
        <h3 class="modal-title">{{vm.title}}</h3>
    </div>
    <div class="modal-body">
        <p ng-bind-html="vm.message"></p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="vm.onOk()">ok</button>
    </div>
</div>
 

ошибка в вашем js-файле, вам нужно объявить функцию, как показано ниже. вы просто копируете этот код и помещаете его в свой файл, тогда он будет работать нормально.

ПРИМЕЧАНИЕ: не ModalService.ShowModal, он должен быть ModalService.openModal
проверьте свой код здесь

 $scope.openCancelDialog = function() {
alert('why am not showing CAncel');
ModalService.openModal('Analysis Error', 'I am Error Type', 'Error');

}


$scope.openErrorDialog = function() {
console.log('why am not showing Error');
ModalService.openModal('Analysis Error', 'I am cancel Type', 'Cancel');
}
 

я создал здесь новый PLNKR: https://plnkr.co/edit/3RBJneSt7RCClrJ5Hba2?p=preview

 $scope.submitForm = function() {    
      //check to make sure the form is completely valid
       if ($scope.userForm.$valid) {
         alert('our form is amazing');
       }

}; 
$scope.openCancelDialog = function(){
   //alert('why am not showing CAncel');
   ModalService.openModal('Analysis Error', 'I am Error Type', 'Error');
 }


 $scope.openErrorDialog = function(){
    //alert('why am not showing Error');
    ModalService.openModal('Analysis Error', 'I am cancel Type', 'Cancel');
 }