亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

I'll tell you an idea, but I won't explain it in detail, because I don't like to reach out to others... I'll give you the plan, at least use your brain to think about it.

First of all, the following code does not use ui-bootstrap's $modal, but ng-strap's $modal. The reason is that I think the code quality of the latter is better than the former, but the latter is relatively new and the API is not as complete as the former. Therefore, you need to have relatively strong hands-on skills, but this has nothing to do with the expansion of $modal service that I will talk about next.

Secondly, you must consider these issues before extending a public $modal service:

1. What can be reused? Which ones need to be (possibly) newly specified each time? (templates, parameters, methods, etc.)
2. What is the expected calling method? What does the return result look like?
3. How high are the scalability and flexibility requirements?

There is no clear answer to these questions at the beginning, but you need to simulate an answer in your mind, because it will determine how to write your service.

The first step is to prepare the default parameters; these are the parameters provided by the original $modal. First set an initial state (according to your own needs)

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

Step 2: Write the attribute extension code of the new service; so that the new service can have the same attribute extension capabilities as the original $modal

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

Then there is the definition of ConfirmModal, and the final return is $promise, so that the caller can expand his or her business logic; I added some comments at the key points, and the rest can be understood by yourself:

javascriptfunction ConfirmModal() {
    // 新服務的默認參數(shù)，允許覆蓋
    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) {
                // 把調(diào)用者的 $scope 傳進來，生成新的 $scope 給自己，實現(xiàn) $scope 繼承
                // 最大的用處：可以在 $modal 的模版里直接是用 parent $scope 里的屬性和方法
                var _scope = parentScope.$new()

                // 給新 $scope 一個 namespace，等價于 angular 的 controller as 語法
                _scope.modalModel = {}

                // 合并默認參數(shù)和用戶傳遞的參數(shù)
                var _options = angular.extend(_.clone(this.defaults), options)
                _options.scope = _scope

                // 創(chuàng)造 modal 實例
                var _modal = $modal(_options)

                // 返回 promise，默認給模版綁定兩個方法，一個用于確認，一個用于取消
                // 如需要更多方法，則可以在 contentTemplate 里調(diào)用 parent $scope 的方法
                // @params immediateHide: 布爾，用于指明觸發(fā)默認綁定方法后是自動關(guān)閉 $modal，
                // 還是留給調(diào)用者在 .then 里手動關(guān)閉
                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)
        }
    }
}

Call example:

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

For templates, just refer to the original $modal and rewrite it yourself. The code is available on github, that’s it.