AngularJS Linky filter stoppropagation

Question

I have a span tag that looks like this:

<span ng-bind-html="item.Name | linky" ng-click="open(item)"></span>

within an ng-repeat.

I have a problem though, if item.Name contains an email or link the linky filter changes the html and inserts an anchor tag. Now when I click the link the ng-click fires AND the anchor opens, but I only want the anchor to open and prevent ng-click from being called ...is this possible?

Answer 1

How about something like this for your html:

<span ng-bind-html="item.Name | linky" ng-click="open(item, $event)"></span>

And this for your function call:

$scope.open = function(item, event){
    if(event.srcElement.tagName !== 'A'){
        alert('do something here with ' + item.Name);
    }        
}

There may be a better way but I believe this will work. Although it's in the documentation I saw $event in this group article.

Answer 2

How about using a directive!

app = angular.module("myModule", ["ngSanitize"])
    .directive('linkyDir', function() {
        return {
            restrict: 'E',
            replace: true,
            scope: { item: '=' },
            template: '<span ng-bind-html="item.Name | linky", ng-click="open(item)"></span>',
            controller: function($scope, $element) {
                $scope.open = function(item) {
                    if ($element[0].firstChild.tagName !== "A") {
                        console.log("Not an anchor");
                    } 
                    else {
                        console.log("Is an anchor tag");
                    }
                }
            }
        };
    })

And with the restrict: 'E', you'll call it like this

<p ng-repeat="item in items">
    <linky-dir item="item"></linky-dir>
</p>