检测未保存的更改并使用angularjs提醒用户
下面是到目前为止的代码
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript">
function Ctrl($scope) {
var initial = {text: 'initial value'};
$scope.myModel = angular.copy(initial);
$scope.revert = function() {
$scope.myModel = angular.copy(initial);
$scope.myForm.$setPristine();
}
}
</script>
</head>
<body>
<form name="myForm" ng-controller="Ctrl">
myModel.text: <input name="input" ng-model="myModel.text">
<p>myModel.text = {{myModel.text}}</p>
<p>$pristine = {{myForm.$pristine}}</p>
<p>$dirty = {{myForm.$dirty}}</p>
<button ng-click="revert()">Set pristine</button>
</form>
</body>
</html>
如何发出警报browser close或是否url redirect有一些未保存的数据，以便用户决定是否继续？
问题答案：
这样的事情应该做到：
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript">
function Ctrl($scope) {
var initial = {text: 'initial value'};
$scope.myModel = angular.copy(initial);
$scope.revert = function() {
$scope.myModel = angular.copy(initial);
$scope.myForm.$setPristine();
}
}
angular.module("myApp", []).directive('confirmOnExit', function() {
return {
link: function($scope, elem, attrs) {
window.onbeforeunload = function(){
if ($scope.myForm.$dirty) {
return "The form is dirty, do you want to stay on the page?";
}
}
$scope.$on('$locationChangeStart', function(event, next, current) {
if ($scope.myForm.$dirty) {
if(!confirm("The form is dirty, do you want to stay on the page?")) {
event.preventDefault();
}
}
});
}
};
});
</script>
</head>
<body>
<form name="myForm" ng-controller="Ctrl" confirm-on-exit>
myModel.text: <input name="input" ng-model="myModel.text">
<p>myModel.text = {{myModel.text}}</p>
<p>$pristine = {{myForm.$pristine}}</p>
<p>$dirty = {{myForm.$dirty}}</p>
<button ng-click="revert()">Set pristine</button>
</form>
</body>
</html>
请注意，在此示例中未触发$
locationChangeStart的侦听器，因为在这样一个简单的示例中AngularJS不处理任何路由，但它应在实际的Angular应用程序中运行。
-
问题内容： 我需要在ASP .Net应用程序中实现“未保存的更改”提示。如果用户修改了Web表单上的控件，并试图在保存之前导航离开，则将出现提示，警告他们尚未保存更改，并为他们提供取消并保留在当前页面上的选项。如果用户未触摸任何控件，则不应显示该提示。 理想情况下，我想用JavaScript实现此功能，但是在我开始滚动自己的代码之前，是否有任何现有的框架或推荐的设计模式来实现这一目标？理想情况下，
-
问题内容： 我是AngularJs的新手，所以这可能微不足道。是否有内置的AngularJ 来检测表单中未保存的数据。如果没有，那么如何去写一个。任何指针将不胜感激。 html代码是 我的角度js控制器代码是 我正在尝试编写指令以检测未保存的数据，并且我猜想它会写在上述控制器中。 问题答案： AngularJS设置CSS类和任何输入栏你已经使用在NG- 模型，您的FormController拥有的
-
在Chrome DevTools中设置持久化编写，以便您可以立即查看更改并将这些更改保存到磁盘。 Chrome DevTools允许您更改网页上的元素和样式，并实时查看更改效果。 默认情况下，刷新浏览器，更改就会消失，除非您已经手动将其复制并粘贴到外部编辑器中，并保存。 Workspaces(工作区)允许您将这些更改保存到磁盘，而不必离开Chrome DevTools。将从本地Web服务器提供的资
-
我正在尝试撤消自上次提交以来的所有更改。看过这篇文章后，我尝试了＜code＞git reset--hard。我回答说，头现在在18c3773…但当我查看我的本地源时，所有文件仍然在那里。我错过了什么？
-
问题内容： 我试图使用makemigrations命令在现有应用程序中创建迁移，但输出“未检测到更改”。 通常，我使用命令创建新应用，但在创建该应用时并未将其用于该应用。 调试后，我发现它没有创建迁移，因为应用程序中缺少软件包/文件夹。 如果不存在该文件夹，还是创建丢失的文件夹，会更好吗？ 问题答案： 要为应用创建初始迁移，请运行并指定应用名称。将创建迁移文件夹。 你的应用必须首先包含（在sett
-
问题内容： 我必须根据浏览历史实现一些业务逻辑。 我想做的是这样的： URL更新后，有什么方法可以接收来自react-router的回调吗？ 问题答案： 尝试检测路线变化时，可以使用功能。考虑到您正在使用，请用HOC 包装您的组件以访问道具。 返回一个函数。您将使用它来收听。 您可以像这样配置路线 index.js 然后在 AppContainer.js中 从历史文档： 您可以使用收听当前位置的更