Question

我的主控制器的一个目标是阻止用户访问其他用户的网址。通过监听$ locationChangeStart并使用其事件preventDefault方法，这非常合适。不幸的是，调用这种方法具有奇怪的副作用，以某种方式“中断”函数“handleNotification”的工作，其目的是通知用户2秒钟她或她已经做了非法的事情。如果我注释掉event.preventDefault（），一切都按预期工作。所以我的问题是：'默认'preventDefault的'范围'是什么阻止我没有在脑海中，哪个使handleNotification函数无法正常工作？

$scope.$on('$locationChangeStart', function(event, newUrl, oldUrl) {
    ifUserIs('loggedIn', function() {
        if (newUrl.split('#/users/')[1] !== $scope.user.userId) {
            handleNotification('alert', 'You are not allowed to go here.');
            event.preventDefault();
        }
    });
});

function handleNotification (type, message) {

$scope.notice = {
    content: message,
    type: type
};

$timeout(function() {
    delete $scope.notice;
    return true;
    }, 2000);
}

Answer 1

以下更新

确定。问题出在其他地方。在相关的jsfiddle中一切正常。在找到导致这种奇怪行为的来源后，我会告诉你。

<html ng-app="mapApp">
    <div ng-controller="mainCtrl">
        <global-error message="{{notice.content}}"></global-error>
    </div>

</html>

代码。

var mapApp = {};
mapApp = angular.module('mapApp', []);
mapApp.controller('mainCtrl', function ($scope, $location, $timeout) {
    $location.path('users/2')

$scope.$on('$locationChangeStart', function (event, newUrl, oldUrl) {

    handleNotification('alert', 'You are not allowed to go here.');
    event.preventDefault();

});

function handleNotification(type, message) {
    $scope.notice = {
        content: message,
        type: type
    };

    $timeout(function () {
        delete $scope.notice;
        console.log('deleted');
        return true;
    }, 2000);

   $scope.$digest();

}

}）;

mapApp.directive('globalError', function () {
    return {
        restrict: 'E',
        scope: {
            message: '@',
            type: '@'
        },
        template: "<div class=\"alert-box {{type}}\">\
                <p>\
                    {{message}}\
                </p>\
            </div>"
    };
});

<强>更新好。更进一步。而问题仍然存在。现在我知道改变浏览器中的路径与通过在代码中放置$location.path('users/2')来更改URL是不同的（见上文）。虽然$location.path('users/2')按预期工作，但手动更改浏览器地址栏中的路径只会使地址跳转回旧地址而不显示通知。因此event.preventDefault()正常工作，但handleNotification('alert', 'You are not allowed to go here.')不正常。奇怪。

更新2 将$scope.$digest()添加到handleNotification函数的末尾就可以了。

什么是event.preventDefault防止事件发生？

1 个答案: