Question

当点击任一关闭按钮时，我用三个参数调用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）当用户点击submit以外的任何地方关闭它时，如何使用相同的三个参数（information.add, information.subject, information.emailContent）调用modal函数。

为避免混淆，我在点击submit按钮时调用close函数。当用户点击modal（不是关闭按钮）以关闭它时，我只是不确定如何调用它。

我尝试使用hidden.bs.modal事件，因为它会在modal关闭时触发，但无法使其生效。

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

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

ATTEMPT 1

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

$('.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

ATTEMPT 2

submit函数已附加到此控制器的$scope（emailViewController）

(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]);
}());

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

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

ATTEMPT 3

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

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

ATTEMPT 4

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

基本上，我能够看到localStorage对象中的数据，因为我在我的控制器$scope.localStorage = $localStorage emailViewController中执行此操作Attempt 2，但我不知道＃39;查看用户在浏览器Local Storage

中输入的数据

ATTEMPT 5

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

当用户点击模态外部以关闭模式（而不是按钮）时，会触发hidden.bs.modal并调用submit。在这种情况下，我可以看到用户在localStorage对象中输入的值，但我看不到devtools 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>

Answer 1

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

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

<强> JAVASCRIPT

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

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

通过单击外部关闭bootstrap模式时的回调函数

1 个答案: