javascript - AngularJS $uibModal 作为具有不同 Controller 的服务

Question

我想了一会儿这个问题。

我想知道如何将不同类型的 Controller 和不同的 templateUrl 从 angularjs 添加到 $uibModal。这样你就没有那么多实际上做同样事情的代码。仅在不同的controller 和不同的template 上。

这是我到目前为止所做的:

vm.addDialogue = function () {
  vm.formData = {};

  var modalInstance = $uibModal.open({
    animation: true,
    templateUrl: 'views/modals/add.dialogue.html',
    controller: 'addDialogueController',
    controllerAs: 'vm',
    backdrop: 'static',
    resolve: {
      formData: function() {
          return vm.formData;
      },
      selectedTab: 1,
      editTime: false
    }
  });
};

vm.addProject = function(){
  vm.formData = {};

  var modalInstance = $uibModal.open({
    animation: true,
    templateUrl: 'views/modals/add.project.html',
    controller: 'addProjectController',
    controllerAs: 'vm',
    backdrop: 'static',
    resolve: {
      formData: function () {
        return vm.formData;
      }
    }
  });

    modalInstance.result.then(function (newProject) {
      vm.errorMessage = null;
        vm.projects.unshift(savedProject);
    }, function () {
      console.info('Modal dismissed at: ' + new Date());
    });
  }

这行得通，但我还有五个模态框，我试图找到这七个适合一个功能而不是七个不同功能的东西。 我还尝试将所有这些都放在一次 Controller 中，而不是它们所属的 Controller 中。这工作了一会儿，但后来它没有显示一些应该在页面上的按钮。

Answer 1

好吧，您可以通过使用服务 来抽象您的代码并将您的参数解析为。此服务将处理 uibModal 实例。这样您就可以避免重复的代码。

AngularJS 示例应用程序和服务:

var myApp = angular.module('myApp', []);

//simple controller
myApp.controller('MyCtrl', function (myModalService) {

  //open modal
  myModalService.openModal('views/modals/add.project.html', 'addProjectController');

  //close on click
  $scope.close = function () {
      myModalService.modalInstance.close();
  }
});

// my simple modal service
myApp.service('myModalService', function() {

  this.modalInstance = null;

  this.openModal = function (templateUrl, controller) {

    this.modalInstance = $uibModal.open({
      animation: true,
      templateUrl: templateUrl,
      controller: controller,
      controllerAs: 'vm',
      backdrop: 'static',
      resolve: {
        formData: function() {
          return vm.formData;
        }
      }
    });

    return this.modalInstance;
  }

  return this;
});