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
angularjs angularjs-directive event-propagation javascript

5 ответов

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

вы можете использовать тот факт, что это то же самое объект события в обоих контроллерах 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

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

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

1
Use e.stopImmediatePropagation();
elem.bind('click', function (e) {
  if (disable(scope)){
    e.stopImmediatePropagation();
    return false;
  }

  return true;
});
1

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

0

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

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

витрина

0