Question

我想为我网站的限制动作创建一个alngularjs指令。例如，我有一个锚点会触发角度路线变化，但在此之前我想要显示一个模态登录对话框我可以使用preventDefault停止路由，但是我无法恢复路由。我也试过了虚拟事件触发（element.triggerHandler（＆＃39;点击＆＃39;））但没有成功。
我不仅要将指令应用于路由更改，还应用于任何其他操作。

.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');
                }
            });
        }
    }
}]);

有什么建议吗？感谢

Answer 1

我找到的解决方案是：

.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。

Answer 2

我不认为Event.preventDefault()会捕获或延迟事件。 AFAIK，它只是彻底取消它们（见MDN）。我不相信这是一种用其处理程序恢复原始事件的方法。（但也许你并不打算将术语“恢复”从字面上理解得很好。）

在这种特定情况下，我认为你必须检查$(e.target).attr('href')，然后**用它来更新路线（你需要注入$location服务（Docs）并使用其.path() getter / setter方法）。

- 祝你好运！

**快速注意：您最有可能想要通过“简历”＆＃39;处理程序到您的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()方法以在用户确实经过身份验证时触发回调。

防止默认事件并在之后恢复（angularjs，jquery）

2 个答案: