angularjs Linky filtr stopPropagation

Question

Mam span znacznik, który wygląda tak:

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

obrębie NG-repeat.

Mam jednak problem, jeśli item.Name zawiera e-mail lub link, filtr linkowy zmienia kod HTML i wstawia znacznik kotwicy. Teraz, gdy klikam łącze, uruchamiany jest ng-click, a kotwica otwiera się, ale chcę tylko, żeby kotwica się otworzyła i aby nie było wywoływania ng-click ... czy to możliwe?

Answer 1

jak o czymś takim dla HTML:

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

a to dla wywołania funkcji:

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

Może być lepszy sposób, ale wierzę, że to zadziała. Chociaż jest w wersji documentation, widziałem $event w this group article.

Answer 2

Nie wiem, czy to zadziała, ale spróbuj.

Dodaj parametr do swojej funkcji otwartej i przekazuj this jako wskaźnik bieżącego elementu dom.

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

teraz w otwarty funkcja edytowany KOD:

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 
    . 
    . 
    . 

    } 

więc metoda zostanie wywołana, ale zwróci false, jeśli jest to tag kotwicy.

To nie może być to, co chcesz, ale to będzie służyć swój cel :)

Answer 3

Co powiesz na używanie dyrektywy!

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

I z ograniczyć: 'E', można nazwać jak ten

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