angular.js - angularjs $modal的用法
PHPz
PHPz 2017-05-15 16:53:44
0
1
741

如何使用angularjs $modal编写一个公用的弹框插件?望详解,谢谢。

PHPz
PHPz

学习是最好的投资!

全部回复(1)
给我你的怀抱

我告诉你一个思路,但不会详解,因为我不喜欢伸手党……方案给你,最起码动脑子思考一下吧。

首先,以下代码用的不是 ui-bootstrap 的 $modal, 而是 ng-strap 的 $modal,原因是我觉得后者的代码质量比前者好一些,不过后者比较新,API 没有前者那么完善,因此需要你有比较强的动手能力,不过这和接下来要说的扩展 $modal service 没有关系。

其次,扩展一个公用 $modal service 之前你得先要考虑一下这些问题:

  1. 可以复用的是哪些?需要每次都(可能)新指定的是哪些?(模版、参数、方法等等)
  2. 期待的调用方式是什么样的?返回结果又是什么样的?
  3. 可扩展性和灵活性要求有多高?

这些问题在一开始是没有明确答案的,但你需要在心里模拟一个答案出来,因为它将决定你的 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 或 directive
function 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 上都有,就这样。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板