Làm cách nào để tạo một chỉ thị AngularJS để stopPropagation?

Tôi đang cố gắng "stopPropagation" để ngăn trình đơn thả xuống của thanh điều hướng Twitter Bootstrap đóng khi một phần tử (liên kết) bên trong một li được nhấp vào. Sử dụng phương pháp này dường như là giải pháp phổ biến .

Trong Angular, có vẻ như một chỉ thị là nơi để làm điều này? Vì vậy, tôi có:

// do not close dropdown on click
directives.directive('stopPropagation', function () {
    return {
        link:function (elm) {            
            $(elm).click(function (event) {                
                event.stopPropagation();
            });
        }
    };
});

... nhưng phương thức không thuộc phần tử:

TypeError: Object [object Object] has no method 'stopPropagation'

Tôi tuân theo chỉ thị với

<li ng-repeat="foo in bar">
  <div>
    {{foo.text}}<a stop-propagation ng-click="doThing($index)">clickme</a>
  </div>
</li>

Bất kỳ đề xuất?

Tôi đã sử dụng cách này: Đã tạo một chỉ thị:

    .directive('stopEvent', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attr) {
                if(attr && attr.stopEvent)
                    element.bind(attr.stopEvent, function (e) {
                        e.stopPropagation();
                    });
            }
        };
     });

có thể được sử dụng theo cách này:

<a ng-click='expression' stop-event='click'>

Đây là cách chung chung hơn để ngừng lan truyền bất kỳ loại sự kiện nào.

"Hiện tại, một số lệnh (tức là ng: click) ngừng truyền sự kiện. Điều này ngăn cản khả năng tương tác với các khuôn khổ khác dựa vào việc nắm bắt các sự kiện như vậy." - liên kết

... và có thể sửa mà không cần chỉ thị và chỉ cần làm:

<a ng-click="doThing($index); $event.stopPropagation();">x</a>

stopPropagationphải được gọi trên một đối tượng sự kiện, không phải bản thân phần tử. Đây là một ví dụ:

compile: function (elm) {
    return function (scope, elm, attrs) {
        $(elm).click(function (event) {
            event.stopPropagation();
        });
    };
}

Đây là một chỉ thị đơn giản, trừu tượng để dừng truyền sự kiện. Tôi nghĩ nó có thể hữu ích cho ai đó. Chỉ cần vượt qua trong trường hợp bạn muốn dừng lại.

<div stopProp="click"></div>

app.directive('stopProp', function () {
  return function (scope, elm, attrs) {
    elm.on(attrs.stopProp, function (event) {
        event.stopPropagation();
    });
  };
});