Question

我想了解事件在AngularJS上下文中触发的顺序。

我有一个指令，其中有一个事件监听器：

angular.module('myApp').directive('myDirective', ['$document', function ($document) {
    function link (scope, element, attrs) {

       $document.on('mouseup', function (event) {
           event.stopPropagation();
           console.log("mouse up heard");
       })

    }

    return {link:link}

}

我也有一个通用的视图，我使用这个指令。

<div ng-click="listenForClick()">
    <div my-directive>
    </div>
</div>

在控制器中，我得到了：

angular.module('myApp').controller('myController', ['$scope', function ($scope) {
$scope.listenForClick = function() {

    console.log("I want to block the mouse up from being heard here!!");

    //Unfortunately, as I have it right now, this console.log is still showing.

}

}]);

起初，我认为可能是因为事件目标在文档上，并且没有任何东西可以传播（即listenForClick（）已经发生过，因为它是里面文献）。但是，console.log消息的顺序是：

“听到鼠标”
“我想阻止鼠标在这里被听到!!”

与我的想法相反。这表明事件首先在myDirective中命中了文档监听器，然后按照DOM的建议点击了ng-click，但不知怎的，stopPropogation失败了。

问题：

为什么stopPropogation失败？你将如何达到预期的效果？
我很困惑，因为通常情况下，例如，使用JQuery，您将事件侦听器附加到DOM树中的元素上，并且DOM树的层次结构决定首先听到哪些侦听器。但是，在上面的例子中，我正在处理一个附加到普通旧div的指令，其中我有我的监听器，但实际上我已将监听器附加到$ document。问题：事件监听器实际附加的是什么，以及如何解释上述消息的顺序？角度如何处理事件和多指令？

AngularJS多指令传播顺序

0 个答案: