角度模态关闭并提交

时间:2017-05-29 22:41:21

标签: angularjs angular-ui-bootstrap

您好我试图让一个模态设置为关闭或在打开后提交。它成功地开放,但我无法实现关闭或提交。我对角度并不熟悉,而且我已经试图解决这个问题。这是模态打开的控制器。

( function () {        
    function ModalCtrl ($uibModal) {            
        this.open = function() {
            console.log("Open sesame.")
            var mobalInstance = $uibModal.open({
                templateUrl : '/templates/modals.html',
                controller: 'ModalCtrl',
                controllerAs: 'modal'
            });
        }
    }

    angular
        .module('blocChat')
        .controller('ModalCtrl', ['$uibModal', ModalCtrl]);
})();

我有一个模态关闭和提交的控制器,此时此刻不成功。这是我离开的地方。

( function () {
    function ModalCloseSubmitCtrl ($uibModal, ModalCtrl) {            
        var modal = ModalCtrl;

        this.submit = function() {
            console.log("submitted!")
            $uibModal.submit(modal);
            };


        this.close = function() {
            console.log("Closed successfully.")
            $uibModal.close({$value: modal});
            };
    }

    angular
        .module('blocChat')
        .controller('ModalCloseSubmitCtrl', ['$uibModal', 'ModalCtrl', ModalCloseSubmitCtrl]);
})();

我已经尝试过阅读文档,但它并没有点击。如果有人可以指出如何正确地将功能链接在一起,我将非常感激。谢谢你的时间。

以下是html模板,每个控制器一个。

<div ng-repeat="room in roomController.rooms">{{ room.$value }}</div>

<button type="button"
        ng-click="mod.open()">Create new room</button>


</div>

这是关闭和提交模态函数发挥作用的模板。

<div>
<input type="submit"
    ng-controller="ModalCloseSubmitCtrl as mods"
    ng-submit= "mods.submit()">Submit room name.
<button type="button"
    ng-controller="ModalCloseSubmitCtrl as mods"
    ng-click= "mods.close()">Close</button>

1 个答案:

答案 0 :(得分:0)

closeController中的$ uibModal与你在ModalCtrl中打开的实例不同,所以我建议将close事件附加到第一个ModalCtrl中的modalInstance并将所有逻辑保存在单个服务中