防止默认事件并在之后恢复
防止默认事件并在之后恢复
提问于 2014-10-01 22:05:27
我想创建一个angularjs指令限制我的网站的行动。例如，我有一个锚，它会触发angular中的路由更改，但在此之前，我想显示一个模式登录对话框。
我可以使用preventDefault停止路由，但不能恢复路由。我也尝试过虚拟事件触发(element.triggerHandler('click'))，但没有成功。
我不仅希望将该指令应用于路由更改，还希望将其应用于任何其他操作。
.directive('loginRequired', ['AuthService', 'AUTH_EVENTS',
function(AuthService, AUTH_EVENTS) {
return {
link : function(scope, element, attrs) {
element.on('click', function(e) {
if (!AuthService.isAuthenticated()) {
e.preventDefault();
$('#myModal').modal();
scope.$on(AUTH_EVENTS.loginSuccess, function() {
//resume event
});
console.log('$scope.$on happened');
}
});
}
}
}]);有什么建议吗？
回答 2
Stack Overflow用户
发布于 2014-10-02 16:14:01
我找到的解决方案是：
.value('lastPrevented', {
elem : null
}).directive('loginRequired', ['AuthService', 'lastPrevented',
function(AuthService, lastPrevented) {
return {
link : function(scope, element, attrs) {
element.on('click', function(e) {
if (!AuthService.isAuthenticated()) {
lastPrevented.elem = element;
e.preventDefault();
$('#myModalLogin').modal();
}
});
}
}
}]).run(['lastPrevented', '$rootScope', 'AUTH_EVENTS', '$timeout',
function(lastPrevented, $rootScope, AUTH_EVENTS, $timeout) {
$rootScope.$on(AUTH_EVENTS.loginSuccess, function() {
$timeout(function() {
if (!!lastPrevented.elem) {
lastPrevented.elem[0].click();
lastPrevented.elem = null;
}
})
});
}]);这不是恢复..。从字面上看，我认为这是不可行的。该解决方案的灵感来自于this question。
Stack Overflow用户
发布于 2014-10-02 00:11:30
我认为Event.preventDefault()不会捕获或延迟事件。AFAIK，它只会完全取消它们(参见MDN)。我不相信有一种方法可以用tact中的处理程序恢复原始事件。(但你可能并不打算把“简历”这个词从字面上理解。)
在本例中，我认为您必须检查$(e.target).attr('href')，然后**使用它来更新路由(您将需要注入$location服务(Docs)并使用它的.path() getter/setter方法)。
--祝你好运！
**快速注意:您最有可能希望将‘简历’处理程序作为回调传递给AuthService.isAuthenticated()方法，因为它可能会等待某种异步业务。粗略的例子：
element.on('click', function(e) {
e.preventDefault();
newRoute = $(e.target).attr('href');
AuthService.isAuthenticated(function () {
$('#myModal').modal();
scope.$on(AUTH_EVENTS.loginSuccess, function() {
$location.path(getWhatYouNeedFromUrlString(newRoute));
});
}));
});将.isAuthenticated()方法设置为在用户确实通过身份验证时触发回调。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26143311
复制相关文章
相似问题
腾讯云开发者
