避免點擊與角

Question

我有以下HTML兩個元素：

<div data-ng-repeat='image in model.images' data-ng-click="open(image)" class="image"> 
    <img src="{{image.Url}}" alt="" /> 
    <a href="" data-ng-click="vote(image)" class="vote"><i class="icon-heart"></i></a> 
    <span>{{image.Votes}}</span> 
    </div> 

而且下面的JavaScript：

application.controller('ImageController', function ImageController($scope, ImageService, ngDialog) { 

    $scope.model = { 
     images: [], 
     loading: false, 
     pages: { instagram: '' }   
    } 

    var load = function() { 
     $scope.model.loading = true; 
     ImageService.GetList($scope.model.pages.instagram) 
     .success(function (data, status, headers, config) { 
      $scope.model.images = $scope.model.images.concat(data.Images) 
      $scope.model.pages.instagram = data.NextInstagramPage; 
     }) 
     .error(function (data, status, headers, config) { }) 
     .finally(function() { 
      $scope.model.loading = false 
     });; 
    } 

    $scope.loader = function() { 
     return $scope.model.loading ? 'loading' : 'load more'; 
    } 

    $scope.open = function (image) { 
     var scope = $scope.$new(); 
     scope.model = { image: image }; 
     ngDialog.open({ 
     className: "dialog", 
     plain: false, 
     scope: scope,    
     template: 'image' 
     }); 
    }; 

    $scope.vote = function (image) { 
     ImageService.Vote(image) 
     .success(function (data, status, headers, config) { }) 
     .error(function (data, status, headers, config) { }); 
    }; 

    load(); 

    }); 

問題是，當我在投票單擊這兩個動作發生：開放，投票。

這是因爲投票是在div圖像裏面嗎？

我該如何避免這種情況？

UPDATE

我也試過這似乎工作如下：

application.directive('stopPropagation', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attr) { 
     element.bind(attr.stopPropagation, function (e) { 
      e.stopPropagation(); 
     }); 
     } 
    }; 
    }); 

然後按如下方式使用它：

<a href="" data-ng-click="vote(image)" data-stop-propagation="click" class="vote"><i class="icon-heart"></i></a> 

有誰認爲，在使用任何問題，這樣的這個指令？

Answer 1

將您的代碼更改爲以下。您需要停止事件傳播

<div data-ng-repeat='image in model.images' data-ng-click="open(image, $event)" class="image"> 
     <img src="{{image.Url}}" alt="" /> 
     <a href="" data-ng-click="vote(image, $event)" class="vote"><i class="icon-heart"></i></a> 
     <span>{{image.Votes}}</span> 
     </div> 





application.controller('ImageController', function ImageController($scope, ImageService, ngDialog) { 

     $scope.model = { 
      images: [], 
      loading: false, 
      pages: { instagram: '' }   
     } 

     var load = function() { 
      $scope.model.loading = true; 
      ImageService.GetList($scope.model.pages.instagram) 
      .success(function (data, status, headers, config) { 
       $scope.model.images = $scope.model.images.concat(data.Images) 
       $scope.model.pages.instagram = data.NextInstagramPage; 
      }) 
      .error(function (data, status, headers, config) { }) 
      .finally(function() { 
       $scope.model.loading = false 
      });; 
     } 

     $scope.loader = function() { 
      return $scope.model.loading ? 'loading' : 'load more'; 
     } 

     $scope.open = function (image, $event) { 
      var scope = $scope.$new(); 
      scope.model = { image: image }; 
      ngDialog.open({ 
      className: "dialog", 
      plain: false, 
      scope: scope,    
      template: 'image' 
      }); 

      $event.stopPropagation(); 
     }; 

     $scope.vote = function (image, $event) { 
$event.stopPropagation();   
ImageService.Vote(image) 
      .success(function (data, status, headers, config) { }) 
      .error(function (data, status, headers, config) { }); 
     }; 

     load(); 

     }); 

Answer 2

因爲事件冒泡。這兩個元素都捕獲它。您可以使用event.stopPropagation停止傳播事件或event.preventDefault以防止事件的默認行爲並由您自己執行。