2012-09-03 21 views
5

Ben span şöyle etiketine sahip.angularjs Linky filtre stopPropagation

item.Name bir e-posta içeriyorsa veya linky filtresi html'yi değiştirir ve bir bağlantı etiketi eklerse bir sorunum var. Bağlantıyı tıklattığımda ng-click yangınları VE anchor açılır, ancak sadece çapanın açılmasını ve ng-tıklamasının çağrılmasını engellemek istiyorum ... bu mümkün mü?

+0

Hi gibi arayacağım! Bu tıklama geri aramalarının hangi sırada olduğunu biliyor musunuz? Açıklıktan önce çapa mı? –

cevap

6

nasıl html böyle bir şey hakkında görev yapacak: En işlev çağrısı için

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

Ve bu:

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

Daha iyi bir yol olabilir ama bunun işe yarayacağını düşünüyorum. documentation'da olmasına rağmen this group article'da $event'u gördüm.

+0

En küçük miktarda vermek düzenlediğiniz açıklama için.I angularjs sayesinde hakkında çok farkında değil. Win. – Greg

+0

Bunu yaptığınız için teşekkürler! – yoleg

0

Bunun işe yarayıp yaramayacağını bilmiyorum ama denemelisin.

Açık işlevinize bir parametre ekleyin ve geçerli dom öğesinin işaretçisi olarak this'u geçirin. açık işlev EDITED KODU şimdi

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

:

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

    } 

böylece yöntemi çağrılır ama bağlantı etiketi ise yanlış döndürür.

Bu

istediğini olmayabilir ama amacınıza :)

+0

Çalışmıyor gibi görünüyor. 'This' hep yayılma, yani bir href niteliğini – Greg

+0

zorunda kalmayacaksınız ama Linky html değiştirir ve –

+0

Evet bağlantı etiketi yayılma içinde olan anchore etiketi yerleştirir söyledi. Bu nasıl ng-bind-html çalışır. Anlaşmanın içerdiği değeri ve bağlantıyı dahil etmek için linky refactors HTML'yi koyar. Nihai html gibi görünecektir '' yüzden koyarak 'yayılma üzerinde this' javascript çapa geçmesine asla. – Greg

1

Bir yönergenin kullanımına ne dersiniz!

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

Ve ile

kısıtlamak: 'E', bu

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