Geek asks and answers

AngularJS Linky filter stoppropagation

I have a tag spanthat looks like this:

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

inside ng-repeat.

I have a problem though, if it item.Namecontains a message or link, the linky filter modifies the html and inserts the anchor tag. Now, when I click on the link, ng-click starts and the kernel opens, but I want the anchor to open and prevent the ng-click call ... is this possible?

+5
source share
3 answers

How about something similar for your html:

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

And this is for calling the function:

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

It might be better, but I think it will work. Although this is in the documentation I saw $eventin this article in a group .

+6
source

!

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");
                    }
                }
            }
        };
    })

: 'E',

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

, , .

Add a parameter to the public function and pass it thisas a pointer to the 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
    .
    .
    .

    }

therefore, the method will be called, but will return false if it is a binding tag.

It may not be what you want, but it will serve your purpose :)

0
source

More articles:


All Articles