通過單擊行中的任意位置來選擇包含鏈接和按鈕的行

Question

我有一個管理聯繫人的AngularJS應用程序。主頁面列出了具有不同行的表格的聯繫人列表。當用戶點擊該行的任何地方（除了編輯鏈接和刪除最後一列聯繫人的按鈕外），他必須重定向到我的頁面的一個部分（聯繫詳細信息）。

我試圖做到這一點。它的工作，但我的按鈕刪除聯繫人不起作用。我怎樣才能讓這個按鈕起作用？

這裏是我的模板：

<table ng-show="contacts.length" class="table table-striped table-hover spacer"> 
    <thead> 
    <tr> 
     <th class="colPerson"> 
     <a href="" ng-click="personsSort('PERSON')">Person</a> 
     <span class="hSpacer" ng-class="cssChevronsTri('PERSON')"></span> 
     </th> 
     <th class="colCompany"> 
     <a href="" ng-click="personsSort('COMPANY')">Company</a> 
     <span class="hSpacer" ng-class="cssChevronsTri('COMPANY')"></span> 
     </th> 
     <th class="colDate"> 
     <a href="" ng-click="personsSort('REQUESTTRUEDATE')">Date</a> 
     <span class="hSpacer" ng-class="cssChevronsTri('REQUESTTRUEDATE')"></span> 
     </th> 
     <th class="colDescription"> 
     <a href="" ng-click="personsSort('REQUESTDESCRIPTION')">Description</a> 
     <span class="hSpacer" ng-class="cssChevronsTri('REQUESTDESCRIPTION')"></span> 
     </th> 
     <th class="colAction">Action</th> 
    </tr> 
    </thead> 

    <tbody ng-repeat="contact in contacts | filter:searchText | orderBy:champTri:triDescendant" ng-click="selContact(contact,contact.ID)"> 
    <tr class="clickable"> 
     <td class="colPerson" ng-class="{sel:selIdx==$index}"><a href="#/view-contacts/{{contact.ID}}">{{contact.PERSON}}</a></td> 
     <td class="colCompany">{{contact.COMPANY}}</td> 
     <td class="colDate">{{contact.REQUESTTRUEDATE | date:'dd/MM/yyyy'}}</td> 
     <td class="colDescription">{{contact.REQUESTDESCRIPTION}}</td> 
     <td class="colNbRequest">{{contact.NBREQUEST}}</td> 

     <td class="colAction"> 
     <a href="#/edit-contacts/{{contact.ID}}" class="inline btn btn-primary"> 
      <span class="glyphicon glyphicon-pencil"></span> 
     </a> 
     <button class="inline btn btn-default" data-ng-click="confirmDelPerson(contact.ID)"> 
      <span class="glyphicon glyphicon-remove"></span> 
     </button> 
     </td> 
    </tr> 
    </tbody> 
</table> 

如果我點擊該行的任何地方顯示看到詳細信息的頁碼。 如果我點擊鏈接上的最後一列編輯頁面進行編輯，它同樣可行。 但是，如果我點擊按鈕刪除它不起作用（看到細節頁面出現）。

這裏是我的控制器的一部分：在<td>標籤

app.controller('ctrlContacts', function ($scope, ContactService) { 
    $scope.contacts = null; 
    $scope.searchButtonText = "Search"; 
    $scope.test = false; 
    $scope.reSearch = function() { 
    // simulate search 
    $timeout(function() { 
     // search is complete 
    }, 2000); 
    } 
    $scope.search = function (searchText) { 
    if (!searchText.length) { 
     //alert("searchText empty"); 
    } 
    if (searchText.length > 2) { 
     $scope.loading = true; 
     $scope.test = true; 
     $scope.searchButtonText = "Loading..."; 
     ContactService.fastSearch(searchText).success(function (contacts) { 
     var length = contacts.length; 
     $scope.loading = false; 
     if (length == 0) { 
      $scope.searchButtonText = "No result"; 
     } else { 
      $scope.searchButtonText = length + " results found"; 
     } 
     // For the orderby date 
     for (var i = 0; i < length; i++) { 
      if (contacts[i].REQUESTTRUEDATE != "") { 
      contacts[i].REQUESTTRUEDATE = new Date(contacts[i].REQUESTTRUEDATE.replace(/-/g, "/")); 
      } else { 
      contacts[i].REQUESTTRUEDATE = null; 
      } 
     } 
     $scope.contacts = contacts; 
     $scope.champTri = 'PERSON'; 
     $scope.selIdx = -1; 
     $scope.selContact = function (contact, idx) { 
      $scope.selectedContact = contact; 
      $scope.selIdx = idx; 
      window.location = "#/view-contacts/" + idx; 
     } 
     $scope.isSelContact = function (contact) { 
      return $scope.selectedContact === contact; 
     } 
     }); 
    } else { 
     $scope.contacts = null; 
    } 
    } 
    // recherche 
    $scope.searchText = null; 
    $scope.razRecherche = function() { 
    $scope.searchText = null; 
    } 
    // tri 
    $scope.champTri = null; 
    $scope.triDescendant = false; 
    $scope.personsSort = function (champ) { 
    if ($scope.champTri == champ) { 
     $scope.triDescendant = !$scope.triDescendant; 
    } else { 
     $scope.champTri = champ; 
     $scope.triDescendant = false; 
    } 
    } 
    $scope.cssChevronsTri = function (champ) { 
    return { 
     glyphicon: $scope.champTri == champ, 
     'glyphicon-chevron-up': $scope.champTri == champ && !$scope.triDescendant, 
     'glyphicon-chevron-down': $scope.champTri == champ && $scope.triDescendant 
    }; 
    } 
    $scope.confirmDel = function (id) { 
    if (confirm('Do you want to delete this contact?')) { 
     ContactService.delContact(id).success(function() { 
     ContactService.getContact().success(function (contacts) { 
      $scope.contacts = contacts; 
     }); 
     }); 
    } 
    $scope.orderby = orderby; 
    }; 
}); 

Answer 1

這可能是這個

<tbody ... ng-click="selContact(contact,contact.ID)"> 

嘗試把這個NG-點擊。

<tbody ng-repeat="contact in contacts | filter:searchText | orderBy:champTri:triDescendant" > 
    <tr class="clickable"> 
     <td ng-click="selContact(contact,contact.ID)" class="colPerson" ng-class="{sel:selIdx==$index}"><a href="#/view-contacts/{{contact.ID}}">{{contact.PERSON}}</a></td> 
     <td ng-click="selContact(contact,contact.ID)" class="colCompany">{{contact.COMPANY}}</td> 
     <td ng-click="selContact(contact,contact.ID)" class="colDate" >{{contact.REQUESTTRUEDATE | date:'dd/MM/yyyy'}}</td> 
     <td ng-click="selContact(contact,contact.ID)" class="colDescription">{{contact.REQUESTDESCRIPTION}}</td> 
     <td ng-click="selContact(contact,contact.ID)" class="colNbRequest">{{contact.NBREQUEST}}</td> 

     <td class="colAction"> 
     <a href="#/edit-contacts/{{contact.ID}}" class="inline btn btn-primary"> 
      <span class="glyphicon glyphicon-pencil"></span> 
     </a> 
     <button class="inline btn btn-default" data-ng-click="confirmDelPerson(contact.ID)"> 
      <span class="glyphicon glyphicon-remove"></span> 
     </button> 
     </td> 
    </tr> 
    </tbody> 

此外，我建議你使用Flex和不<table>標籤，我已經有很多與此標籤的問題。