在开发 Web 应用程序时，我们经常需要确保用户不会因为意外的离开而失去对页面所做的更改。通常情况下，我们使用 JavaScript 的 window.onbeforeunload 事件来捕获这种情况并显示提示框。在 AngularJS 中，我们可以使用 $scope.$on('$locationChangeStart') 事件来完成同样的功能。
实现步骤
- 在控制器中添加一个
$scope.$on('$locationChangeStart')监听器。 - 在监听器中检查表单是否被修改。
- 如果表单已被修改，则使用
window.confirm()显示要么是“确认离开”的提示框或者是“取消离开”的提示框。 - 如果用户选择“取消离开”，则取消导航并保留当前页面。
下面是示例代码：
-- -------------------- ---- -------
--- ----- - ----------------------- ----
-------------------------- -------- -------- -------- -
------------------ - ------
-- ---------
---------------------- -- -
------ ---------------------
-- -------- ---------- --------- -
-- --------- --- --------- -
------------------ - -----
-
---
-- -- -------------------- -----
---------------------------------- -------- ------- -
-- -------------------- -
--- ------ - ------------------------------------
-- --------- -
-----------------------
-
-
---
---在上述代码中，我们将 $scope.$watch 用于检查表单是否被修改。如果表单已被修改，则设置一个变量 $scope.isFormDirty 为 true。接下来，我们添加了 $scope.$on('$locationChangeStart') 监听器，在事件处理程序中检查表单是否被修改并显示提示框。
结论
在 AngularJS 中实现当用户离开页面时显示提示框需要执行以下步骤：
- 使用
$scope.$watch监视表单是否被修改。 - 在
$scope.$on('$locationChangeStart')监听器中检查表单是否被修改并显示提示框。 - 如果用户选择“取消离开”，则取消导航并保留当前页面。
通过遵循这些步骤，我们可以确保用户不会因为意外的离开而失去对页面所做的更改。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25338