javascript - AngularJS Linky filter stoppropagation - Stack Overflow

admin管理员组

文章数量:1418685

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?

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?

• javascript
• onclick
• angularjs
• stoppropagation

Share Improve this question Follow edited Sep 6, 2012 at 12:38 Greg asked Sep 3, 2012 at 11:47 GregGreg 31.4k1818 gold badges6969 silver badges8686 bronze badges 1

• Hi! Do you know in which order these click callbacks are called? Anchor before span? – Armel Larcier Commented Sep 6, 2012 at 12:43

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6 +50

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.

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>

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 :)

本文标签： javascriptAngularJS Linky filter stoppropagationStack Overflow