通过点击外部关闭引导模式时的回调函数

Question

submit单击任一关闭按钮时，我将使用三个参数调用该函数。

\n\n

<div class="modal" ng-controller="emailViewController">\n        <div class="modal-header" >\n            <button type="button" class="close" ng-click = "submit(information.add, information.subject, information.emailContent); close(); clear()">\xc3\x97</button>\n            <h3>Compose Email</h3>\n        </div>\n        <div class="modal-body">\n            <form >\n                <tags options="{addable: true}" typeahead-options="typeaheadOpts" data-model="information.add" data-src="toPerson as toPerson for toPerson in to"></tags>\n                <input type="text" placeholder="Subject" style="width:95%;" data-ng-model = "information.subject"><br />\n                <textarea style="width:95%;" rows="10" data-ng-model = "information.emailContent"></textarea>\n            </form>\n        </div>\n        <div class="modal-footer">\n            <a href="#" class="btn" ng-click = "submit(information.add, information.subject, information.emailContent); close(); clear()">Close</a>\n            <a href="#" class="btn btn-primary" ng-click = "close(); clear()">Send</a>\n        </div>\n    </div>\n

\n\n

我有以下问题：

\n\n

1)当用户单击 之外的任意位置将其关闭时，如何调用submit具有相同三个参数 ( ) 的函数。information.add, information.subject, information.emailContentmodal

\n\n

为了避免混淆，当单击按钮时我已经调用了该submit函数。close我只是不确定当用户单击外部modal（而不是关闭按钮）来关闭它时如何调用它。

\n\n

我尝试使用该hidden.bs.modal事件，因为它在关闭时触发modal，但无法让它工作。

\n\n

$(\'.modal\').on(\'hidden.bs.modal\', function () {\n            $scope.submit(add, subject, emailContent);\n        }); \n

\n\n

submit2）当用户关闭浏览器时 如何调用该函数？

\n\n

尝试1

\n\n

submit我意识到当事件触发时我没有在函数中调用正确的参数hidden.bs.modal，因此我修改了代码如下：

\n\n

$(\'.modal\').on(\'hidden.bs.modal\', function () {\n        $scope.submit($scope.information.add, $scope.information.subject, $scope.information.emailContent)\n    });\n

\n\n

该submit函数将三个值存储在 中localStorage。

\n\n

information.add上面的代码存储了in的值localStorage，但没有存储information.subject和information.emailContentin的值localStorage

\n\n

尝试2

\n\n

submit功能附加到$scope该控制器的 ( emailViewController)

\n\n

(function() {\n    \'use strict\';\n    var emailViewController = function (fetchDataService,\n                                        $scope,$filter,$timeout, $localStorage) {\n\n          $scope.information = {\n              add: [],\n              subject: [],\n              emailContent: []\n            };\n\n         $scope.submit = function (add, subject, emailContent) {\n          console.log(add);\n          console.log(subject);\n          console.log(emailContent);\n\n          if (! ($localStorage.add instanceof Array) ) {\n                $localStorage.add = [];\n            }\n\n          if(add.length != 0) {\n            $localStorage.add.push(add);\n          }\n\n            if (! ($localStorage.subject instanceof Array) ) {\n                $localStorage.subject = [];\n            }\n\n          if(subject != "") {\n            $localStorage.subject.push(subject);\n            console.log("after localStorage" + subject);\n          }\n\n            if (! ($localStorage.emailContent instanceof Array) ) {\n                $localStorage.emailContent = [];\n            }\n\n          if(emailContent != "") {\n            $localStorage.emailContent.push(emailContent);\n            }\n         };\n\n        $(\'.modal\').on(\'hidden.bs.modal\', function () {\n            $scope.submit($scope.information.add, $scope.information.subject, $scope.information.emailContent)\n        });\n\n         $scope.localStorage = $localStorage;\n         console.log($scope.localStorage);\n    };\n\n    angular.module(\'iisEmail\')\n        .controller (\'emailViewController\',\n        [\'fetchDataService\', \'$scope\',\'$filter\', \'$timeout\', \'$localStorage\', emailViewController]);\n}());\n

\n\n

添加Attempt 1到控制器后，出现新问题。为了避免这种情况，我必须Attempt 1从控制器中删除。

\n\n

这就是发生的问题 -close单击按钮时，submit调用。After Attempt 1，即使在事件被触发submit时也会被调用。hidden.bs.modal结果，三个参数的值被存储在 localStorage 中两次。

\n\n

尝试3

\n\n

我尝试使用onBlur代替hidden.bs.modal，但事件没有触发。

\n\n

$(\'.modal\').on(\'blur\', function () {\n            console.log("Blurred");\n            $scope.submit($scope.information.add, $scope.information.subject, $scope.information.emailContent)\n        });\n

\n\n

尝试4

\n\n

当我这样做时console.log($scope)，我会看到用户在对象中输入的三个参数的值localStorage。这正是我想要的，但这些值没有存储在Local Storage. 因此，当我打开开发工具并检查 时Local Storage，我看不到用户输入的值。

\n\n

本质上，我能够看到localStorage对象中的数据，因为我$scope.localStorage = $localStorage在控制器中执行此操作（emailViewController在 中Attempt 2），但我看不到用户在浏览器中输入的数据Local Storage

\n\n

尝试5

\n\n

我不再submit从视图调用该函数，因为我正在使用该hidden.bs.modal事件。现在，当我单击关闭按钮时，hidden.bs.modal将被触发并被Submit调用。我可以看到用户在localStorage对象和 devtools 中输入的值Local Storage。这工作得很好。

\n\n

当用户单击模态框外部以将其关闭（而不是在按钮上）时，hidden.bs.modal将被触发并被submit调用。在这种情况下，我可以看到用户在localStorage对象中输入的值，但看不到 devtools 中的值Local Storage。

\n\n

<div class="modal" ng-controller="emailViewController">\n        <div class="modal-header" >\n            <button type="button" class="close" ng-click = "close(); clear()">\xc3\x97</button>\n            <h3>Compose Email</h3>\n        </div>\n        <div class="modal-body">\n            <form >\n                <tags options="{addable: true}" typeahead-options="typeaheadOpts" data-model="information.add" data-src="toPerson as toPerson for toPerson in to"></tags>\n                <input type="text" placeholder="Subject" style="width:95%;" data-ng-model = "information.subject"><br />\n                <textarea style="width:95%;" rows="10" data-ng-model = "information.emailContent"></textarea>\n            </form>\n        </div>\n        <div class="modal-footer">\n            <a href="#" class="btn" ng-click = "close(); clear()">Close</a>\n            <a href="#" class="btn btn-primary" ng-click = "close(); clear()">Send</a>\n        </div>\n    </div>\n

\n

Answer 1

您确定正确初始化 bootstrap js 吗？

我做了一个简单的代码笔：http://codepen.io/dschu/pen/LpYdZY ?editors=101

脚本语言

$('.modal').on('hidden.bs.modal', function () {
  console.log('IT IS HIDDEN!')
}); 

检查你的控制台。“它被隐藏了！” 模式关闭后将立即显示。