angularjs NG-点击发射了两兄弟标签的事件，而不是一个 [英] angularjs ng-click event of two sibling tag fired, instead of one

问题描述

我有以下的html code

I have following html code

<li ng-repeat="contact in contacts">
 <label ng-style="myStyle">
<input type="checkbox" ng-click="deleteContact(contact._id); myStyle={'text-decoration': 'line-through'};"/>
<img src="./images/edit_inline.gif" width="16px" height="16px" ng-click="editContact(contact._id)"/> 
{{contact.username}}
{{contact.email}}
 </label>
</li>

控制器code是如下：

controller code is as follows:

function mainController($scope, $http) {

$scope.deleteContact = function(id) {
    $http.delete('/api/contacts/' + id)
        .success(function(data) {
            $scope.contacts = data;
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });
};

$scope.editContact = function(id) {
    $http.get('/api/search/'+id)
    .success(function(data) {
        $scope.formData = data;
    })
    .error(function(data) {
        console.log('Error: ' + data);
    });

}

}

当我在img标签点击呼叫editContact，吴复选框，单击事件也被触发，因此该记录被删除。

When I click on img tag to call editContact, checkbox ng-click event is also fired, as a result the record get deleted.

我不明白，怎么会出现这种情况。
我是新来angularJs，请指导

I can't understand, how does this happen. I am new to angularJs, please guide

推荐答案

不是真的AngularJS有关。你在一个包裹标签两个输入。标签内部的点击就会触发这两个事件。你可以改变你的HTML格式。也许，取出来的图像标签标记。

Not really AngularJS related. You wrapped both inputs in a label. A click inside the label will trigger both events. You can change the format of your HTML. Perhaps, take the image out of the label tag.

作为替代方案，可以明确地与任一图像或chechbox标签通过分配一个id相关联。下面的同伙形象的标签。

As an alternative, you could explicitly associate the label with either the image or chechbox by assigning an id. The following associates the label with image.

...
<label for="image" ng-style="myStyle">
  <input type="checkbox" ng-click="deleteContact(contact._id); myStyle={'text-decoration': 'line-through'};"/>
  <img id="image" src="./images/edit_inline.gif" width="16px" height="16px" ng-click="editContact(contact._id)"/> 
  {{contact.username}}
  {{contact.email}}
</label>
...

这篇关于angularjs NG-点击发射了两兄弟标签的事件，而不是一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！