Javascript 在angularjs中检查未保存的表单数据(使用ui路由器的多个表单)
实施详情: 我正在使用ui路由器加载ui视图div中的表单页面。我引用了一个很好的示例,如何使用同一指令对多个表单执行$dirty check 表格1 错误: 首次加载页面时,$dirty值为false。然后我填写表单详细信息并单击第三个图标文件,如果$scope.iForm.$dirty和for$dirty出现在警报中,则第二个表单脏检查会出错Javascript 在angularjs中检查未保存的表单数据(使用ui路由器的多个表单),javascript,angularjs,angular-directive,angularjs-ng-form,jquery-dirtyforms,Javascript,Angularjs,Angular Directive,Angularjs Ng Form,Jquery Dirtyforms,实施详情: 我正在使用ui路由器加载ui视图div中的表单页面。我引用了一个很好的示例,如何使用同一指令对多个表单执行$dirty check 表格1 错误: 首次加载页面时,$dirty值为false。然后我填写表单详细信息并单击第三个图标文件,如果$scope.iForm.$dirty和for$dirty出现在警报中,则第二个表单脏检查会出错 angular.js:12520 TypeError: Cannot read property '$dirty' of undefined 及 演
angular.js:12520 TypeError: Cannot read property '$dirty' of undefined
及
演示:检查表单是否存在,然后再检查表单是否脏。做点像
if ($scope.myForm && $scope.myForm.$dirty) {
if(!confirm("myForm. Do you want to continue ?")) {
event.preventDefault();
}
}
if ($scope.iForm && $scope.iForm.$dirty) {
if(!confirm("iform. Do you want to continue ?")) {
event.preventDefault();
}
}
检查表单是否存在,然后再检查表单是否脏。做点像
if ($scope.myForm && $scope.myForm.$dirty) {
if(!confirm("myForm. Do you want to continue ?")) {
event.preventDefault();
}
}
if ($scope.iForm && $scope.iForm.$dirty) {
if(!confirm("iform. Do you want to continue ?")) {
event.preventDefault();
}
}
通过从表单的name属性获取指令,使指令更简单,这样一个指令中只有一个条件&它可以在许多地方重用
<form name="myForm" ng-controller="Controller" confirm-on-exit>
通过从表单的name属性获取指令,使指令更简单,这样一个指令中只有一个条件&它可以在许多地方重用
<form name="myForm" ng-controller="Controller" confirm-on-exit>
有一个更简单的方法
只需将指令放置在表单元素上,并通过链接功能访问表单控制器:
myApp.directive('confirmOnExit', function() {
return {
require: 'form',
link: function($scope, elem, attrs, formController) {
// condition when back page is pressed
window.onbeforeunload = function(){
if (formController.$dirty) {
return "The form '" + formController.$name + "' is dirty, do you want to stay on the page?";
}
}
// condition when user try to load other form (via icons )
$scope.$on('$stateChangeStart', function(event, next, current) {
if (formController.$dirty) {
if(!confirm(formController.$name + ". Do you want to continue ?")) {
event.preventDefault();
}
}
});
}
};
});
有一个更简单的方法
只需将指令放置在表单元素上,并通过链接功能访问表单控制器:
myApp.directive('confirmOnExit', function() {
return {
require: 'form',
link: function($scope, elem, attrs, formController) {
// condition when back page is pressed
window.onbeforeunload = function(){
if (formController.$dirty) {
return "The form '" + formController.$name + "' is dirty, do you want to stay on the page?";
}
}
// condition when user try to load other form (via icons )
$scope.$on('$stateChangeStart', function(event, next, current) {
if (formController.$dirty) {
if(!confirm(formController.$name + ". Do you want to continue ?")) {
event.preventDefault();
}
}
});
}
};
});
你能解释一下$scope[attrs.name]在寻找什么吗?这是否仅适用于表单数据更改或任何用户单击?@Mad-D将删除表单名称,并在控制器范围内搜索表单名称。谢谢您,先生,我想这正是我需要做的。不要叫我先生,我和您一样。很高兴帮助你。谢谢你能解释一下$scope[attrs.name]在寻找什么吗?这是否仅适用于表单数据更改或任何用户单击?@Mad-D将删除表单名称,并在控制器范围内搜索表单名称。谢谢您,先生,我想这正是我需要做的。不要叫我先生,我和您一样。很高兴帮助你。谢谢谢谢,你的回答也是对的。我只需要检查一下是否存在。谢谢,你的回答也是正确的。我只需要检查一下形式的存在。
var form = $scope[attrs.name]; //which will take out form name & do search that inside scope
if (form.$dirty) { //form object would always exist, to make sure you could also add one more check `form &&`
if(!confirm("myForm. Do you want to continue ?")) {
event.preventDefault();
}
}
myApp.directive('confirmOnExit', function() {
return {
require: 'form',
link: function($scope, elem, attrs, formController) {
// condition when back page is pressed
window.onbeforeunload = function(){
if (formController.$dirty) {
return "The form '" + formController.$name + "' is dirty, do you want to stay on the page?";
}
}
// condition when user try to load other form (via icons )
$scope.$on('$stateChangeStart', function(event, next, current) {
if (formController.$dirty) {
if(!confirm(formController.$name + ". Do you want to continue ?")) {
event.preventDefault();
}
}
});
}
};
});