在子元素单击事件中阻止父指令调用

Question

这里我创建了pop-over指令，我需要将它应用于父级以及它的子级。当我点击孩子，所以也显示父目标。我可以如何阻止事件对父母的支持。如何使用jquery event.StopPropogation ()？

http://jsfiddle.net/JNqqU/279/

指令代码：

var bootstrap = angular.module("bootstrap", []);
bootstrap.directive('myBox', function ($compile) {
       return {
            restrict: "E",
            transclude: true,
            template: "<span class='box'  pop-over items='items' title='MAin span'>Hello<br/> <br/><br/><br/><br/>In side Box <a href='#' pop-over items='items' title='Mode of transport'>Show Pop over</a> </span>",
            link: function (scope, element, attrs) {
                var popOverContent;
                if (scope.items) {
                    var html = getTemplate("items");
                    popOverContent = $compile(html)(scope);                    
                }
                var options = {
                    content: popOverContent,
                    placement: "bottom",
                    html: true,
                    title: scope.title
                };
                $(element).popover(options);
            },
            scope: {
                items: '=',
                title: '@'
            }
        };
    });
bootstrap.directive('popOver', function ($compile) {
        var itemsTemplate = "<ul class='unstyled'><li ng-repeat='item in [1,2,3,4,5,6,7,8]'>{{item}}</li></ul>";
        var getTemplate = function (contentType) {
            var template = '';
            switch (contentType) {
                case 'items':
                    template = itemsTemplate;
                    break;
            }
            return template;
        }
        return {
            restrict: "A",
            transclude: true,
            template: "<span ng-transclude></span>",
            link: function (scope, element, attrs) {
                var popOverContent;
                if (scope.items) {
                    var html = getTemplate("items");
                    popOverContent = $compile(html)(scope);                    
                }
                var options = {
                    content: popOverContent,
                    placement: "bottom",
                    html: true,
                    title: scope.title
                };
                $(element).popover(options);
            },
            scope: {
                items: '=',
                title: '@'
            }
        };
    });
bootstrap.directive( 'dismissPopovers', [ '$http', '$templateCache', '$compile', '$parse', function ( $http, $templateCache, $compile, $parse) {
            return {
                restrict: 'A',
                link: function(scope, element, attrs) {
                    element.bind('mouseup', function(e) {
                        var clickedOutside = true;
                        $('.popover-link').each(function() {
                            if ($(this).is(e.target) || $(this).has(e.target).length) {
                                clickedOutside = false;
                                return false;
                            }
                        });
                        if ($('.popover').has(e.target).length) {
                            clickedOutside = false;
                        }
                        if (clickedOutside) {
                            $('.popover').prev().click();
                        }
                    });   
                }
            };
        }]);

Answer 1

通过在child指令中添加以下内容来解决此问题。即popover

element.bind('click', function (e) {
            e.stopPropagation();
        });