angulaire.js - Utilisation d'angularjs $modal

Question

Comment utiliser angulairejs $modal pour écrire un plug-in pop-up public ? Veuillez expliquer en détail, merci.

Answer 1

Je vais vous raconter une idée, mais je ne l'expliquerai pas en détail, car je n'aime pas tendre la main aux autres... Je vais vous donner le plan, utilisez au moins votre cerveau pour y réfléchir il.

Tout d'abord, le code suivant n'utilise pas le $modal de ui-bootstrap, mais le $modal de ng-strap. La raison est que je pense que la qualité du code de ce dernier est meilleure que celle du premier, mais ce dernier est relativement nouveau. et l'API n'est pas aussi bonne que l'ancienne. Parfaite, vous devez donc avoir de solides compétences pratiques, mais cela n'a rien à voir avec l'expansion du service $modal dont je parlerai ensuite.

Deuxièmement, vous devez prendre en compte ces problèmes avant d'étendre un service public $modal :

1. Que peut-on réutiliser ? Lesquels doivent être (éventuellement) spécifiés à nouveau à chaque fois ? (modèles, paramètres, méthodes, etc.)
2. Quelle est la méthode d'appel attendue ? À quoi ressemble le résultat du retour ?
3. Quelle est la hauteur des exigences en matière d'évolutivité et de flexibilité ?

Il n'y a pas de réponse claire à ces questions au début, mais vous devez simuler une réponse dans votre esprit, car elle déterminera comment rédiger votre service.

La première étape consiste à préparer les paramètres par défaut ; ce sont les paramètres fournis par le $modal d'origine. Définissez d'abord un état initial (selon vos propres besoins)

.

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

Étape 2 : Écrivez le code d'extension de propriété du nouveau service afin que le nouveau service puisse avoir les mêmes capacités d'extension de propriété que le $modal d'origine

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

Ensuite, il y a la définition de ConfirmModal, qui renvoie finalement $promise, afin que l'appelant puisse élargir sa logique métier ; j'ai ajouté quelques commentaires sur les points clés, et le reste peut être compris par vous-même :

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

Instance d'appel :

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

Pour les modèles, référez-vous simplement au $modal original et réécrivez-le vous-même. Le code est disponible sur github, c'est tout.