栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

检测未保存的更改并使用angularjs提醒用户

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

检测未保存的更改并使用angularjs提醒用户

这样的事情应该做到:

<!doctype html><html ng-app="myApp"><head>    <script src="http://pre.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('/confirm/iOnExit', 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/i-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应用程序中运行。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/633261.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号