Question

我有以下HTML代码

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

控制器代码如下：

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时，也会触发复选框ng-click事件，结果记录被删除。

我无法理解，这是怎么发生的。我是angularJs的新手，请指导

Answer 1

与AngularJS并不相关。您将两个输入都包装在标签中。标签内的单击将触发两个事件。您可以更改HTML的格式。也许，从标签标签中取出图像。

作为替代方案，您可以通过分配ID将标签与图像或chechbox明确关联。以下将标签与图像相关联。

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

Answer 2

Lable类型为相应的for元素生成另一个事件。您可以做的是阻止此点击事件的传播：

HTML：

<img ng-click="editContact($event, contact._id)" src="./images/edit_inline.gif" width="16px" height="16px" /> {{contact.username}}

JS

$scope.editContact = function(e, id) {
    e.preventDefault();
    ...
}

已触发两个兄弟标记的angularjs ng-click事件，而不是一个

2 个答案:

演示：http://plnkr.co/edit/N2nUZS37MXGq7oViyLdz?p=preview