问题描述
如何使用angularjs $modal编写一个公用的弹框插件？望详解，谢谢。
问题解答
回答1：我告诉你一个思路，但不会详解，因为我不喜欢伸手党……方案给你，最起码动脑子思考一下吧。
首先，以下代码用的不是 ui-bootstrap 的 $modal, 而是 ng-strap 的 $modal，原因是我觉得后者的代码质量比前者好一些，不过后者比较新，API 没有前者那么完善，因此需要你有比较强的动手能力，不过这和接下来要说的扩展 $modal service 没有关系。
其次，扩展一个公用 $modal service 之前你得先要考虑一下这些问题：
可以复用的是哪些？需要每次都（可能）新指定的是哪些？（模版、参数、方法等等）期待的调用方式是什么样的？返回结果又是什么样的？可扩展性和灵活性要求有多高？这些问题在一开始是没有明确答案的，但你需要在心里模拟一个答案出来，因为它将决定你的 service 如何写。
第一步，准备默认的参数；这是原 $modal 提供的参数，先设定好一个初始状态（根据自己的需求）
javascript// 可以在入口模块的 .config 里做angular.extend($modalProvider.defaults, { animation: ’am-flip-x’,container: ’body’, templateUrl: ’components/angular-strap/modal.html’})
第二步：编写新服务的属性扩展代码；让新服务可以拥有和原 $modal 一样的属性扩展能力
javascript// 一样，放在某个某块的 config 里.config(function ConfirmModalConfig($modalProvider, ConfirmModalProvider) { ConfirmModalProvider.defaults = angular.extend($modalProvider.defaults, ConfirmModalProvider.defaults )})
然后就是 ConfirmModal 的定义，最终返回的是 $promise，以便于调用者扩展自己的业务逻辑；我在重点处加了些注释，剩下的自己看明白：
javascriptfunction ConfirmModal() { // 新服务的默认参数，允许覆盖 this.defaults = {html: true,templateUrl: ’components/angular-strap/confirm.html’,contentTemplate: ’components/angular-strap/confirm-modal.html’ } this.$get = function($q, $modal) {return { // 只需一个 public method 足够了 open: function _openConfirmModal(parentScope, options) {// 把调用者的 $scope 传进来，生成新的 $scope 给自己，实现 $scope 继承// 最大的用处：可以在 $modal 的模版里直接是用 parent $scope 里的属性和方法var _scope = parentScope.$new()// 给新 $scope 一个 namespace，等价于 angular 的 controller as 语法_scope.modalModel = {}// 合并默认参数和用户传递的参数var _options = angular.extend(_.clone(this.defaults), options)_options.scope = _scope// 创造 modal 实例var _modal = $modal(_options)// 返回 promise，默认给模版绑定两个方法，一个用于确认，一个用于取消// 如需要更多方法，则可以在 contentTemplate 里调用 parent $scope 的方法// @params immediateHide: 布尔，用于指明触发默认绑定方法后是自动关闭 $modal，// 还是留给调用者在 .then 里手动关闭return $q(function(resolve, reject) { _scope.modalModel.confirm = function(data, immediateHide) {if (immediateHide) { _modal.hide() resolve({data: data})} else resolve({data: data, modal: _modal}) } _scope.modalModel.cancel = function(reason, immediateHide) {if (immediateHide) { _modal.hide() reject({reason: reason})} else reject({reason: reason, modal: _modal}) }}) }.bind(this)} }}
调用实例：
javascript// 在某处，通常是 controller 或 directivefunction SomeWhereController(ConfirmModal, Something, $state) { var vm = this vm.delete = function(something) {ConfirmModal.open($scope, { title: ’确定要删除吗？’ }).then(function(result) { return Something.delete(something.id) }).then(function(response) { $state.reload($state.current) }).catch(console.error.bind(console)) }}
模版什么的，参考原始的 $modal 自己改写就是了，代码 github 上都有，就这样。
