angular.js - angularjs $modal的用法

Question

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

Answer 1

Saya akan bagi idea, tetapi saya tidak akan menerangkannya secara terperinci, kerana saya tidak suka menghubungi orang lain... Saya akan memberi anda rancangan, sekurang-kurangnya gunakan otak anda untuk berfikir tentang ia.

Pertama sekali, kod berikut tidak menggunakan $modal ui-bootstrap, tetapi $modal ng-strap Sebabnya saya rasa kualiti kod yang kedua adalah lebih baik daripada yang pertama, tetapi yang kedua adalah agak baharu dan API tidak sebaik yang sebelumnya Perfect, jadi anda perlu mempunyai kemahiran hands-on yang kuat, tetapi ini tiada kaitan dengan pengembangan perkhidmatan $modal yang akan saya bincangkan seterusnya.

Kedua, anda perlu mempertimbangkan isu ini sebelum melanjutkan perkhidmatan $modal awam:

1. Apa yang boleh digunakan semula? Yang manakah perlu (mungkin) baru dinyatakan setiap kali? (templat, parameter, kaedah, dll.)
2. Apakah kaedah panggilan yang dijangkakan? Apakah rupa hasil pulangan?
3. Berapa tinggikah keperluan skalabiliti dan fleksibiliti?

Tiada jawapan yang jelas untuk soalan ini pada mulanya, tetapi anda perlu mensimulasikan jawapan dalam fikiran anda, kerana ia akan menentukan cara menulis perkhidmatan anda.

Langkah pertama ialah menyediakan parameter lalai; ini adalah parameter yang disediakan oleh $modal asal Mula-mula tetapkan keadaan awal (mengikut keperluan anda sendiri)

javascript// 可以在入口模块的 .config 里做
angular.extend($modalProvider.defaults, {              
    animation: 'am-flip-x',                            
    container: 'body',                                 
    templateUrl: 'components/angular-strap/modal.html'
})                                                     

Langkah 2: Tulis kod sambungan harta bagi perkhidmatan baharu supaya perkhidmatan baharu boleh mempunyai keupayaan sambungan harta yang sama seperti $modal asal

javascript// 一样，放在某个某块的 config 里
.config(function ConfirmModalConfig($modalProvider, ConfirmModalProvider) {
    ConfirmModalProvider.defaults = angular.extend(
        $modalProvider.defaults, ConfirmModalProvider.defaults
    )
})

Kemudian terdapat definisi ConfirmModal, yang akhirnya mengembalikan $janji, supaya pemanggil boleh mengembangkan logik perniagaannya, saya menambah beberapa komen pada perkara utama, dan selebihnya boleh difahami oleh anda sendiri:

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

Contoh panggilan:

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

Untuk templat, cuma rujuk $modal asal dan tulis semula sendiri Kod itu tersedia di github, itu sahaja.