javascript - AngularJS Linky过滤器停止传播

Question

我有一个span看起来像这样的标签：

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

在 ng 重复中。

我有一个问题，如果item.Name包含电子邮件或链接，链接过滤器会更改 html 并插入锚标记。现在，当我单击链接时，ng-click 触发并且锚点打开，但我只希望锚点打开并防止调用 ng-click ...这可能吗？

Answer 1

为您的 html 做这样的事情怎么样：

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

可能有更好的方法，但我相信这会奏效。虽然它在我在本组文章中看到的文档中。$event

Answer 2

使用指令怎么样！

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>

Answer 3

我不知道这是否可行，但请尝试一下。

将参数添加到您的 open 函数并this作为当前 dom 元素的指针传递。

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

现在在您的打开功能 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
    .
    .
    .

    }

所以该方法将被调用，但如果它是锚标记将返回 false。

这可能不是你想要的，但它会达到你的目的:)