logo标签列表

当通过点击模态框外部关闭Bootstrap模态框时，回调函数是什么？

javascripttwitter-bootstrap
5

当关闭按钮被单击时，我调用submit函数并传入三个参数。

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

我有以下问题： 1）当用户单击模态框外部关闭它时，如何使用相同的三个参数（information.add、information.subject、information.emailContent）调用submit函数。 为避免混淆，我已经在点击关闭按钮时调用了submit函数。 我只是不确定当用户单击模态框外部关闭它时如何调用它（而不是在关闭按钮上）。 我尝试使用hidden.bs.modal事件，因为它在模态框关闭时触发，但无法使其工作。
$('.modal').on('hidden.bs.modal', function () {
            $scope.submit(add, subject, emailContent);
        });

2) 当用户关闭浏览器时如何调用submit函数？

尝试1

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

$('.modal').on('hidden.bs.modal', function () {
        $scope.submit($scope.information.add, $scope.information.subject, $scope.information.emailContent)
    });
submit函数会将三个值存储在localStorage中。
上述代码将information.add的值存储在localStorage中，但不会将information.subject和information.emailContent的值存储在localStorage中。 submit函数附加在此控制器(emailViewController)的$scope上。
(function() {
    'use strict';
    var emailViewController = function (fetchDataService,
                                        $scope,$filter,$timeout, $localStorage) {

          $scope.information = {
              add: [],
              subject: [],
              emailContent: []
            };

         $scope.submit = function (add, subject, emailContent) {
          console.log(add);
          console.log(subject);
          console.log(emailContent);

          if (! ($localStorage.add instanceof Array) ) {
                $localStorage.add = [];
            }

          if(add.length != 0) {
            $localStorage.add.push(add);
          }

            if (! ($localStorage.subject instanceof Array) ) {
                $localStorage.subject = [];
            }

          if(subject != "") {
            $localStorage.subject.push(subject);
            console.log("after localStorage" + subject);
          }

            if (! ($localStorage.emailContent instanceof Array) ) {
                $localStorage.emailContent = [];
            }

          if(emailContent != "") {
            $localStorage.emailContent.push(emailContent);
            }
         };

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

         $scope.localStorage = $localStorage;
         console.log($scope.localStorage);
    };

    angular.module('iisEmail')
        .controller ('emailViewController',
        ['fetchDataService', '$scope','$filter', '$timeout', '$localStorage', emailViewController]);
}());

添加了“尝试1”到控制器后，出现了一个新问题。为了避免这种情况，我不得不从控制器中删除“尝试1”。
造成问题的原因是-当点击“关闭”按钮时，“提交”被调用。在“尝试1”之后，“hidden.bs.modal”事件触发时仍会调用“submit”。结果，三个参数的值被存储在localStorage两次。
尝试3：
我尝试使用“onBlur”代替“hidden.bs.modal”，但是事件没有被触发。
$('.modal').on('blur', function () {
            console.log("Blurred");
            $scope.submit($scope.information.add, $scope.information.subject, $scope.information.emailContent)
        });

尝试 4

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

实际上，我能够在 localStorage 对象中看到数据，因为我在我的控制器（emailViewController 在 Attempt 2 中）中做了这个 $scope.localStorage = $localStorage，但我在浏览器的 Local Storage 中看不到用户输入的数据。

尝试 5

我不再从视图中调用 submit 函数，因为我正在使用 hidden.bs.modal 事件。现在，当我点击关闭按钮时，会触发 hidden.bs.modal 并调用 Submit。我可以看到用户输入的值存储在 localStorage 对象和开发工具的 Local Storage 中。这完美地运行。

当用户点击模态框外部以关闭它（而不是点击按钮），将触发 hidden.bs.modal 并调用 submit。在这种情况下，我可以在 localStorage 对象中看到用户输入的值，但是我无法在开发工具的 Local Storage 中看到这些值。

<div class="modal" ng-controller="emailViewController">
        <div class="modal-header" >
            <button type="button" class="close" ng-click = "close(); clear()">×</button>
            <h3>Compose Email</h3>
        </div>
        <div class="modal-body">
            <form >
                <tags options="{addable: true}" typeahead-options="typeaheadOpts" data-model="information.add" data-src="toPerson as toPerson for toPerson in to"></tags>
                <input type="text" placeholder="Subject" style="width:95%;" data-ng-model = "information.subject"><br />
                <textarea style="width:95%;" rows="10" data-ng-model = "information.emailContent"></textarea>
            </form>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" ng-click = "close(); clear()">Close</a>
            <a href="#" class="btn btn-primary" ng-click = "close(); clear()">Send</a>
        </div>
    </div>
嘿，你能在 JSFiddle 上制作一个演示吗？ - Himesh Aadeshara
你尝试过使用 on blur 吗？ - johnny 5
你尝试过仅记录隐藏.bs.modal事件吗？ - dschu
请查看我的问题中的“尝试3”部分。@johnny5 - user4982150
尝试在 focusout 上使用，然后再看看。 - johnny 5
@johnny5，我认为我们成功地找到了问题所在。我认为它与事件无关。请看一下我问题中的“尝试 4”部分。谢谢。 - user4982150
2个回答
3

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

我已经制作了一个简单的codepen：http://codepen.io/dschu/pen/LpYdZY?editors=101

JAVASCRIPT

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

请查看您的控制台。当模态框关闭时，“IT IS HIDDEN！”将显示。

你在submit函数中放置了console.log(emailContent);。它打印出了什么？顺便说一下，你可以像这样做：console.log('emailContent',emailContent); 来给你的日志加上前缀。 - dschu
由于某种原因，console.log(emailContent) 被调用了三次。第一次它正确地打印了用户输入的值。第二次和第三次它记录了一个空数组，如下所示：[]。谢谢。 - user4982150
尝试调查多个调用的来源。我觉得你正在接近答案。 :) - dschu
我认为这个差异与此有关：ng-click="close(); clear()"。这些函数仅在点击按钮时调用。 - dschu
Angular正在多次调用该函数。看起来每次我更改“model”值时，$digest循环和观察程序都会重新运行。我确定这不是问题的原因。我认为这只是Angular预期的行为。 - user4982150
显示剩余5条评论
0

这对我很有帮助，我参考了文档。

var myModal = document.getElementById('timeupModal')
myModal.addEventListener('hidden.bs.modal', function () {
    function_to_run();
})
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接