AngularJS Linky lọc stoppropagation

Question

Tôi có một thẻ span trông như thế này:

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

trong một ng-repeat.

Tôi gặp sự cố, nếu item.Name chứa email hoặc liên kết, bộ lọc liên kết sẽ thay đổi html và chèn thẻ neo. Bây giờ khi tôi nhấp vào liên kết các nhấp nháy ng-click VÀ neo mở ra, nhưng tôi chỉ muốn neo để mở và ngăn chặn ng-click được gọi là ... là điều này có thể?

Answer 1

Làm thế nào về một cái gì đó như thế này cho html của bạn:

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

Và điều này cho gọi hàm của bạn:

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

Có thể có cách tốt hơn nhưng tôi tin rằng điều này sẽ hiệu quả. Mặc dù nó ở trong số documentation Tôi đã thấy $event trong this group article.

Answer 2

Tôi không biết điều này có hiệu quả hay không nhưng hãy thử.

Thêm thông số vào hàm mở của bạn và chuyển this làm con trỏ của phần tử dom hiện tại.

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

bây giờ trong chức năng mở MÃ chỉnh sửa của bạn:

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

    } 

nên phương pháp này sẽ được gọi nhưng sẽ trả về false nếu nó là thẻ neo.

này có thể không phải những gì bạn muốn nhưng nó sẽ phục vụ mục đích của bạn :)

Answer 3

Cách sử dụng chỉ thị!

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

Và với sự hạn chế: 'E', bạn sẽ gọi nó là như

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