Question

我有span标记，如下所示：

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

在ng-repeat中。

我遇到了一个问题，如果item.Name包含电子邮件或链接，则linky过滤器会更改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);
    }        
}

可能有更好的方法，但我相信这会奏效。虽然它位于documentation我在this group article中看到$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>

现在在你的开放功能中编辑代码：

 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。

这可能不是你想要的，但它将满足你的目的：）

AngularJS Linky过滤器停止传播

3 个答案: