当关闭按钮被单击时,我调用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>
on blur
吗? - johnny 5focusout
上使用,然后再看看。 - johnny 5