AngularJS $ uibModal作为具有不同控制器的服务

Question

我和这个问题坐了一会儿。

我想知道如何在angularjs中添加不同类型的控制器和不同的templateUrl到$uibModal。所以你没有那么多实际做同样事情的代码。仅适用于不同的controller和不同的template。

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这有效但我还有五个这些模态，我试图找到这七个适合一个函数而不是七个不同函数的东西。 我也试过将这一切都放在控制器而不是他们所属的控制器中。这有点片刻但是它没有显示一些应该在页面上的按钮。

Answer 1

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

AngularJS示例应用程序＆amp;服务：

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