event.preventDefault () не работает в angular.js и jquery

Question

event.preventDefault () не работает в angular.js и jquery

0

У меня есть одна проблема. Мое требование - когда пользователь нажмет на якорный тег, появится первое подтверждающее сообщение, и если пользователь нажмет кнопку отмены, страница останется такой, какая есть, если нажать кнопку ОК, она перейдет на другую страницу. Пожалуйста, проверьте мои код ниже.

<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'
    })
})

Используя приведенный выше код, появляется окно подтверждения, но когда пользователь нажимает кнопку отмены, он также переходит на другую страницу, которая не должна произойти. Пожалуйста, помогите мне.

satya 30 окт. 2015, в 06:22

Источник

0

Переместить e.preventDefault(); за пределами if
Tushar 30 окт. 2015, в 04:38
0

@Tushar я переместил это в ранее, если заявление, но проблема та же самая, в то время как я нажимаю кнопку отмены / ок, страница перемещается.
satya 30 окт. 2015, в 04:41
0

@Tushar Нет, по-прежнему существует та же проблема. В этом случае для отмены будет выполняться оператор if, а для остальных - другая часть.
satya 30 окт. 2015, в 04:48
2

Вы не должны смешивать элементы angularjs с событиями jquery. почему бы не определить функцию ng-click в контроллере angularjs
levi 30 окт. 2015, в 04:49
0

@levi Это можно решить таким образом? Можете ли вы отредактировать свой ответ?
satya 30 окт. 2015, в 04:52
0

можно спросить, зачем работать с событиями jq при использовании angular? почему бы не сделать все с помощью ng-click?
Jony-Y 30 окт. 2015, в 04:53
0

@satya проблема в том, что вы пытаетесь управлять двумя отдельными событиями вместе, ui-sref и щелчком ... самое быстрое решение - это не использовать ui-sref в данный момент, а в щелчке использовать $ state.go (), тогда вы сможете вызывать только true ... или вы можете создать директиву click для этого случая с приоритетом 1, что означает, что она будет вызвана перед другими событиями
Jony-Y 30 окт. 2015, в 04:57
0

@Jony-Y Jony-Y: ошибка при одновременном использовании ng-click и ui-sref.
satya 30 окт. 2015, в 05:06
0

@Jony-Y Jony-Y: не могли бы вы создать решение для этого?
satya 30 окт. 2015, в 05:12
0

@satya Просто используйте ng-click затем удалите ui-sref и поместите такое же условие с помощью $state.go() внутри ng-click method .
Alberto I.N.J. 30 окт. 2015, в 05:14
0

@AlbertoI.N.J.AlbertoI.NJ: Я могу это сделать, но возникнет некоторая проблема: во-первых, cursor:pointer property on the menu пропустится active класс и во- cursor:pointer property on the menu .
satya 30 окт. 2015, в 05:16
0

@satya Ну, вы всегда можете создать условия для active занятия. Вы можете использовать ng-class а для свойства cursor вы можете просто добавить href="" к anchor для достижения курсора pointer .
Alberto I.N.J. 30 окт. 2015, в 05:19
0

@AlbertoI.N.J.AlbertoI.NJ: Можете ли вы отредактировать свою идею здесь?
satya 30 окт. 2015, в 05:21
0

@satya Во-первых, мне нужно увидеть ваши коды routing .
Alberto I.N.J. 30 окт. 2015, в 05:22
0

Давайте продолжим эту дискуссию в чате .
satya 30 окт. 2015, в 05:26
0

@satya чувак, просто создай простой plunkr и мы покажем тебе ...
Jony-Y 30 окт. 2015, в 05:36

Показать ещё 14 комментариев

Теги:

javascript

jquery

angularjs

2 ответа

Ещё вопросы

Переместить e.preventDefault(); за пределами if
@Tushar я переместил это в ранее, если заявление, но проблема та же самая, в то время как я нажимаю кнопку отмены / ок, страница перемещается.
@Tushar Нет, по-прежнему существует та же проблема. В этом случае для отмены будет выполняться оператор if, а для остальных - другая часть.
Вы не должны смешивать элементы angularjs с событиями jquery. почему бы не определить функцию ng-click в контроллере angularjs
@levi Это можно решить таким образом? Можете ли вы отредактировать свой ответ?
можно спросить, зачем работать с событиями jq при использовании angular? почему бы не сделать все с помощью ng-click?
@satya проблема в том, что вы пытаетесь управлять двумя отдельными событиями вместе, ui-sref и щелчком ... самое быстрое решение - это не использовать ui-sref в данный момент, а в щелчке использовать $ state.go (), тогда вы сможете вызывать только true ... или вы можете создать директиву click для этого случая с приоритетом 1, что означает, что она будет вызвана перед другими событиями
@Jony-Y Jony-Y: ошибка при одновременном использовании ng-click и ui-sref.
@Jony-Y Jony-Y: не могли бы вы создать решение для этого?
@satya Просто используйте ng-click затем удалите ui-sref и поместите такое же условие с помощью $state.go() внутри ng-click method .
@AlbertoI.N.J.AlbertoI.NJ: Я могу это сделать, но возникнет некоторая проблема: во-первых, cursor:pointer property on the menu пропустится active класс и во- cursor:pointer property on the menu .
@satya Ну, вы всегда можете создать условия для active занятия. Вы можете использовать ng-class а для свойства cursor вы можете просто добавить href="" к anchor для достижения курсора pointer .
@AlbertoI.N.J.AlbertoI.NJ: Можете ли вы отредактировать свою идею здесь?
@satya Во-первых, мне нужно увидеть ваши коды routing .
Давайте продолжим эту дискуссию в чате .
@satya чувак, просто создай простой plunkr и мы покажем тебе ...

ionat · Answer 1 · 2015-10-30T04-13-00.000Z

Во-первых, чтобы использовать jQuery, просто убедитесь, что он загружен перед файлом angular.js. Затем вы можете попробовать следующий образец. Для получения дополнительной информации: "Безопасный" $ применяется в 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;
    }
  });
});

pierdevara · Answer 2 · 2015-10-30T04-13-00.000Z

Скорее всего, что происходит, так это то, что директива UiSref зарегистрировала событие щелчка, прежде чем вы зарегистрируете свое имя, и сначала оно будет первым. Это происходит внутри функции директивной ссылки.

Событие click запускает обработчик внутри директивы сперва, устанавливает состояние ui-router, а затем, вероятно, ожидает, что цикл дайджеста страницы изменится.

Во время этого $ timeout он запускается в ваше событие click.

Ваше прекращение распространения работает, но это не помогает, потому что мы уже установили новое состояние, и оно вступит в силу в следующем цикле дайджеста, даже если вы приостановили выполнение js с подтверждением подтверждения.