2012-09-03 8 views
5

私はspanこのようになりますタグを持っています。AngularJS LinkyはフィルタのstopPropagation

item.Nameに電子メールまたはリンクが含まれていると、リンカーフィルタがhtmlを変更してアンカータグを挿入しても問題はあります。今すぐリンクをクリックするとng-clickが起動し、アンカーが開きますが、アンカーが開き、ng-clickが呼び出されないようにするだけです...これは可能ですか?

+0

こんにちはようにそれを呼ぶことにします!これらのクリックコールバックがどの順番で呼び出されているかを知っていますか?アンカー前にスパン? –

答えて

6

方法:あなたの関数呼び出しのための

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

そして、この:

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

もっと良い方法があるかもしれませんが、これはうまくいくと思います。 documentationにありますが、がthis group articleにあります。

+0

最も簡単に理解できるコードです。勝つ。 – Greg

+0

これをありがとう! – yoleg

0

これがうまくいくかどうかわかりませんが、試してみてください。

オープン関数にパラメータを追加し、現在のdom要素のポインタとしてthisを渡します。開いている機能 EDITED CODEで今

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

    } 

ので、メソッドが呼び出されますが、それはアンカータグである場合はfalseを返します。

これは、あなたが望むものではないかもしれませんが、それはあなたの目的を果たすだろう:)

あなたのhtmlのためにこのようなものについて
+0

動作していないようです。 'this'は常にスパンですので、href属性は決してありません – Greg

+0

しかし、あなたはlinkyがhtmlを変更し、アンカータグを配置すると言っています –

+0

はいアンカータグはスパンの内側にあります。これがng-bind-htmlの仕組みです。値をスパンの内側に置き、リンカがアンカーを含めるHTMLをリファクタリングします。最後のhtmlは ''のようになりますので、 'this'をスパンに置くと決してアンカーをジャバスクリプトに渡しません。 – Greg

1

ディレクティブの使用はどうですか?

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> 
関連する問題