AngularJS: Как остановить распространение событий с помощью ng-click?

У меня есть директива, которая делает что-то вроде этого:

app.directive('custom', function(){
    return {
        restrict:'A',
        link: function(scope, element){
            element.bind('click', function(){
                alert('want to prevent this');
            });

        }
    }
});

да, для этого случая необходимо выполнить привязку jQuery-way.

И теперь я хочу остановить распространение этого события (щелчка), если какое-то условие выполнено.

Пытался сделать:

  $event.stopPropagation();
  $event.preventDefault();

но это не помогло.

здесь скрипка, например - http://jsfiddle.net/STEVER/5bfkbh7u/

+8
18 февр. '15 в 14:37
источник поделиться
5 ответов

В вашем случае вы не можете прекратить распространение, потому что событие клика происходит на одном и том же элементе, есть только два разных обработчика.

Однако вы можете использовать тот факт, что это объект тот же, как в контроллере ngClick, так и в директиве. Итак, что вы можете сделать, это установить некоторое свойство этого объекта события и проверить его в директиве:

$scope.dosomething = function($event){
    $event.stopPropagation();
    $event.preventDefault();
    alert('here');

    if (someCondtion) {
        $event.stopNextHandler = true;
    }
}

и в директиве:

link: function(scope, element){
    element.bind('click', function(e) {
        if (e.stopNextHandler !== true) {
            alert('want to prevent this');    
        }
    });            
}

Демо: http://jsfiddle.net/5bfkbh7u/6/

+7
18 февр. '15 в 14:46
источник

Вы пытались снизить приоритет этой директивы, чтобы убедиться, что она связывается после директивы ng-click? Я предполагаю, что события загораются в том порядке, в котором они были связаны, что в свою очередь определяется приоритетом директивы ng-click против вашей директивы.

Вам также потребуется stopImmediatePropagation, чтобы предотвратить запуск других обработчиков одного и того же элемента. stopPropagation просто предотвращает распространение события в родительских обработчиках.

+1
18 февр. '15 в 14:44
источник
Use e.stopImmediatePropagation();
elem.bind('click', function (e) {
  if (disable(scope)){
    e.stopImmediatePropagation();
    return false;
  }

  return true;
});
+1
23 июн. '16 в 13:44
источник

Вы присоединяете оба события к кнопке. Проверьте элемент при регистрации второго события

<div ng-controller="mainCtrl" custom>
    Hi! I'm the parent.
    <button ng-click="dosomething($event)">BUTTON</button>
</div>

Витрина

0
18 февр. '15 в 14:44
источник

здесь нет никакого распространения событий, поскольку у вас есть кнопка, и у вас есть события на одном и том же элементе, это не будет для родительского элемента дочернего элемента, т.е. здесь не происходит пузырение событий или захват событий.

0
18 февр. '15 в 14:42
источник

Посмотрите другие вопросы по меткам или Задайте вопрос