javascript - How to add click handler only when the device is in xs view? -

i have table, button in third cell of each row. button/cell hidden in xs view, using twitter-bootstrap. here's plunker of example: http://embed.plnkr.co/huu9utvychmf34uousak

html:

<table>   <tbody>     <tr repeated-item ng-repeat="item in items"></tr>   </tbody> </table> 

js:

angular.module('test', []).directive('repeateditem', function() {   var lbl = $("#mylbl");   return {     restrict: 'a',     replace: true,     controller: function($scope){       $scope.clickrow = function(){         lbl.text('this should show when button hidden (view xs)');       };        $scope.clickbutton = function(){         lbl.text('clicked button');       };     },     template: '<tr ng-click="clickrow()"><td class="table-col1">cell 1</td><td>cell 2</td><td class="hidden-xs"><button ng-click="clickbutton()">cell 3</button></td></tr>'   }; }); 

you can see third cell hidden when window shrinks. @ point, entire table row needs become clickable.

my question "how can make table row clickable when device in xs view?" best idea right use 2 different tables job.

i think can achieve desired results using ng-touch instead of ng-click table row, won't work non-touch devices when button hidden.

instead of controller use link, can target elem. when user clicks row, label appears if button hidden (meaning user in mobile view). this, detect if button visible.

using method, grid widths can set in css files, design concerns don't leak javascript code. never have update js code set new width.

.directive('repeateditem', function() {   var lbl = $("#mylbl");   return {     restrict: 'a',     replace: true,     template: '<tr ng-click="clickrow()"><td class="table-col1">cell 1</td><td>cell 2</td><td class="hidden-xs"><button ng-click="clickbutton()">cell 3</button></td></tr>',     link: function (scope, elem, attrs) {        scope.clickrow = function ($event) {         var isbuttonvisible = elem.find('button:visible').length;         var isrowclickallowed = isbuttonvisible === 0;          if (isrowclickallowed) {             alert('row click event triggered!');         } else {             console.log('row click event triggered, did nothing, because button visible , accessible.');         }       };        scope.clickbutton = function (){         alert('button click triggered!');       };     }   };