经常会遇到, 填写到一半的表单, 用户点击了其他的链接, 需要跳出对话框确认是否放弃内容.
在angular里, 借助ui.router这个功能实现起来相当方便.
angular.module('tutorialApp')
.controller('JumpCtrl', function ($scope, $q) {
$scope.$on('$stateChangeStart', function (event, toS, toP, fromS, fromP, err) {
var result = confirm('you want to leave');
if (!result) { // 如果不想走了, 那就取消跳转
event.preventDefault();
}
});
});
$stateChangeStart是ui.router定义的一个事件, 在跳转发生之前触发event.preventDefault()阻止了页面跳转的事件(此处的event 是 angular 包装过的事件对象).
注:
confirm对话框可以换成 angular.ui 中的 modal, 也非常的方便.