Question

我有一个问题。我的要求是当用户点击锚标签时将显示第一条确认消息，如果用户点击取消按钮，页面将保持原样，如果单击确定按钮，它将导航到另一页面。请检查下面的代码。

<li ui-sref-active="active" ><a ui-sref=".profile" class="pop">Profile</a></li>
<li ui-sref-active="active"><a ui-sref=".dept" class="pop" >Department</a></li>
<li ui-sref-active="active"><a ui-sref=".usermanagement" class="pop">User Management</a></li>


$('.pop').click( function(e) {
    if (! confirm('You are about to leave - are you sure')) {
       e.preventDefault();
       //e.stopImmediatePropagation();
       return false;
    } else {
       return true;
    }
  });

route.js：

var Admin=angular.module('Channabasavashwara',['ui.router', '720kb.datepicker','ngMessages','ngCapsLock','ui.bootstrap']);
Admin.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
     .state('/', {
            url: '/',
            templateUrl: 'dashboardview/login.html',
            controller: 'loginController'
        })
        .state('dashboard', {
            url: '/dashboard',
            templateUrl: 'dashboardview/dashboard.html',
            controller: 'dashboardController'
        })
        .state('dashboard.profile', {
        url: '/profile',
        templateUrl: 'dashboardview/profile.html',
        controller: 'profileController'
    })
    .state('dashboard.dept', {
        url: '/dept',
        templateUrl: 'dashboardview/dept.html',
        controller: 'deptController'
    })
    .state('dashboard.princpal', {
        url: '/princpal',
        templateUrl: 'dashboardview/princpal.html',
        controller: 'princpalController'
    })
    .state('dashboard.dept_head', {
        url: '/dept_head',
        templateUrl: 'dashboardview/depthead.html',
        controller: 'deptheadController'
    })
    .state('dashboard.usermanagement', {
        url: '/user',
        templateUrl: 'dashboardview/usermangement.html',
        controller: 'managementController'
    })
    .state('dashboard.role', {
        url: '/role',
        templateUrl: 'dashboardview/role.html',
        controller: 'roleController'
    })
    .state('dashboard.editprofile', {
        url: '/editprofile',
        templateUrl: 'dashboardview/editprofile.html',
        controller: 'adminProfileController'
    })
})

通过使用上面的代码确认框即将到来，但是当用户按下取消按钮时，它也会导航到另一个不应该发生的页面。请帮助我。

Answer 1

最有可能发生的事情是UiSref指令在您注册之前已经注册了点击事件，并且它是先到先得。这发生在指令link function内。

click事件首先运行指令内的处理程序，设置ui-router状态，然后可能等待页面更改的摘要周期。

在此超时期间，它会遇到您的点击事件。

您的停止传播有效，但它没有帮助，因为我们已经设置了新状态，它将在下一个摘要周期生效，即使您使用确认警报暂停了js执行。

Answer 2

首先，要使用jQuery，只需确保在angular.js文件之前加载它。然后，您可以尝试以下示例。有关详细信息：'Safe' $apply in Angular.JS

$scope.safeApply = function (fn) {
    var phase = this.$root.$$phase;
    if (phase === '$apply' || phase === '$digest') {
        if (fn && (typeof (fn) === 'function')) {
            fn();
        }
    } else {
        this.$apply(fn);
    }};

$scope.safeApply(function () {
$('.pop').click( function(e) {
    if (! confirm('You are about to leave - are you sure')) {
       e.preventDefault();
       //e.stopImmediatePropagation();
       return false;
    } else {
       return true;
    }
  });
});

event.preventDefault（）在angular.js和jquery中不起作用

2 个答案: