角度引导模式服务不起作用

Question

我在我的应用程序中创建了一个通用模式服务。 但它不工作。这个 plunker 缺少一些小东西，但我无法弄清楚。

根据传递的参数，它会打开错误对话框或取消对话框。

在这里找到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>

错误诊断 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>

Answer 1

你的 js 文件有误，你需要像下面这样声明函数。您只需复制这些代码并将其放入您的文件中即可正常工作。

注意： 不是 ModalService.showModal，应该是 ModalService.openModal check your code here

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

Answer 2

我在这里创建了一个新的 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');
 }