Javascript AngularJS uibModal可重用函数

我想不出正常的标题。对不起
所以问题是，在一个大项目中，大业务逻辑有很多模态。每一个新的模式都是相同的代码，几乎没有变化，比如templateUrl、controller等等。这就是弹出窗口现在被调用的方式：

return uibModal.open({
                    templateUrl: current.path + 'url.html',
                    controller: 'AppController',
                    windowClass: 'PopUp',
                    size: 'md',
                    resolve: {
                        disabled: [function () {
                            return scope.disabled;
                        }]
                    }
                }).result.then(function( comment ){
                    record.comment = comment;
                })

---

而这一常规永远不会结束。所以我感兴趣的是-在您的项目中减少相同代码（在这种情况下相同）的最佳实践是什么？你应该使用服务吗？还是仅仅创建全局函数

在AngularJS中，应始终避免使用全局函数。为此目的创建了服务。我也使用

$uibModal

，并且厌倦了一遍又一遍地写同样的东西

我制作了一个

ModalService

，它允许我提取出大量重复的代码：

function ModalService() {
  var ModalService = this;

  ModalService.basicModal = function(options) {
                var _options = options || {};
                return $uibModal.open({
                    animation: angular.isDefined(_options.animation) ? _options.animation : true,
                    keyboard: angular.isDefined(_options.keyboard) ? _options.keyboard :  true,
                    backdrop: _options.backdrop || 'static',
                    size: _options.size || 'sm',
                    templateUrl: _options.templateUrl || 'templates/modal-message.html',  //default template in case user does not provide one
                    controller: _options.controller || ModalMessageCtrl, // a default controller in case user does not provide one
                    controllerAs: _options.controllerAs || 'vm',
                    resolve: options.resolve || {}
                });

  };

  ModalService.simpleModal = function(options) {
  ...
  };
}

您可以定义多种可从控制器轻松调用的模态：

ModalService.basicModal();
ModalService.simpleModal();
// etc...

所有这些都可以接受可选参数来定制模态：

ModalService.basicModal({
  size: 'lg'
});
ModalService.simpleModal({
  templateUrl: "my-custom-template.html",
  controller: function($scope) {
    //some custom inline controller
  }
}).result.then(function() { //do something });
// etc...

---

在AngularJS中，应始终避免使用全局函数。为此目的创建了服务。我也使用

$uibModal

，并且厌倦了一遍又一遍地写同样的东西

我制作了一个

ModalService

，它允许我提取出大量重复的代码：

function ModalService() {
  var ModalService = this;

  ModalService.basicModal = function(options) {
                var _options = options || {};
                return $uibModal.open({
                    animation: angular.isDefined(_options.animation) ? _options.animation : true,
                    keyboard: angular.isDefined(_options.keyboard) ? _options.keyboard :  true,
                    backdrop: _options.backdrop || 'static',
                    size: _options.size || 'sm',
                    templateUrl: _options.templateUrl || 'templates/modal-message.html',  //default template in case user does not provide one
                    controller: _options.controller || ModalMessageCtrl, // a default controller in case user does not provide one
                    controllerAs: _options.controllerAs || 'vm',
                    resolve: options.resolve || {}
                });

  };

  ModalService.simpleModal = function(options) {
  ...
  };
}

您可以定义多种可从控制器轻松调用的模态：

ModalService.basicModal();
ModalService.simpleModal();
// etc...

所有这些都可以接受可选参数来定制模态：

ModalService.basicModal({
  size: 'lg'
});
ModalService.simpleModal({
  templateUrl: "my-custom-template.html",
  controller: function($scope) {
    //some custom inline controller
  }
}).result.then(function() { //do something });
// etc...

您可以使用在应用程序的配置阶段设置默认选项

app.config(function($uibModalProvider) {
    $uibModalProvider.options = {
        windowClass: 'PopUp',
        size: 'md'
    };
});

如果您使用的是UI Bootstrap 2.1.0或更高版本，您还可以利用angular基于组件的体系结构，在打开一个模型时消除一些额外的障碍

给定一个定义如下的组件：

app.component('myModal', {
    bindings: {close: '&', dismiss: '&', resolve: '<'},
    controller: MyModalController,
    templateUrl: 'myModal.html'
});

$uibModal.open({
    component: 'myModal',
    resolve: {
        // pass data to component
    }
}).result.then(function() {
    // Modal closed
}).catch(function() {
    // Modal dismissed
});

您可以使用在应用程序的配置阶段设置默认选项

app.config(function($uibModalProvider) {
    $uibModalProvider.options = {
        windowClass: 'PopUp',
        size: 'md'
    };
});

如果您使用的是UI Bootstrap 2.1.0或更高版本，您还可以利用angular基于组件的体系结构，在打开一个模型时消除一些额外的障碍

给定一个定义如下的组件：

app.component('myModal', {
    bindings: {close: '&', dismiss: '&', resolve: '<'},
    controller: MyModalController,
    templateUrl: 'myModal.html'
});

$uibModal.open({
    component: 'myModal',
    resolve: {
        // pass data to component
    }
}).result.then(function() {
    // Modal closed
}).catch(function() {
    // Modal dismissed
});

---

将此代码包装到函数中，并在每次调用时提供正确的控制器和模板作为参数如何？将此代码包装到函数中，并在每次调用时提供正确的控制器和模板作为参数如何？谢谢！这就是我一直在寻找的答案。顺便说一下，现在所有的模式模板都在同一个目录中，页面所在的位置。这条路对吗？然后我必须将完整路径作为参数传递给服务谢谢！这就是我一直在寻找的答案。顺便说一下，现在所有的模式模板都在同一个目录中，页面所在的位置。这条路对吗？然后我必须将完整路径作为参数传递给ServiceThank！这是非常有用的信息，我一定会用它的，谢谢！这是非常有用的信息，我肯定会使用它