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?

Jacklighter

Hi! Do you know in which order these click callbacks are called? Anchor before span? – Mage

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.

Epa

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>

Crescin

Answer 3

I don't know if this will work but give it a try.

Add a parameter to your open function and pass this as the pointer of current dom element.

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

now in your open function EDITED CODE :

 function open(item,this)
    {
      // will be true if linky had changed the HTML and added anchor tag
    var children = this.childNodes;   
    for(a in children ) 
    {
      if(children[a].href)
      {
          return false; 
      } 
    }   
 //your existing code
    .
    .
    .

    }

so the method will be called but will return false if it is the anchor tag.

This might not be what you want but it will serve your purpose :)

Tiein

Doesn't seem to work. this is always the span, so will never have a href attribute – Jacklighter

but you said linky changes the html and places anchore tag – Tiein

Yes the anchor tag is inside the span. That's how ng-bind-html works. It puts the value inside the span, and linky refactors the HTML to include the anchor. The final html would look like <span><a></a></span> so putting this on the span will never pass through the anchor to the javascript. – Jacklighter

Ok haven't much aware about angularJs thanks for explanation .I have edited my function give it a try :) – Tiein