javascript - 如何仅在设备处于 xs View 时添加点击处理程序？

Question

我有一个表格，每行的第三个单元格中有一个按钮。使用 twitter-bootstrap，按钮/单元格隐藏在 xs View 中。下面是这个例子的一个例子: 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 ONLY SHOW WHEN THE BUTTON IS 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>'
  };
});

您可以看到，当窗口缩小时，第三个单元格被隐藏。此时，整个表行需要变得可点击。

我的问题是“如何使表格行仅在设备处于 xs View 中时可单击？”我现在最好的想法是使用两个不同的表来完成这项工作。

我认为我可以使用 ng-touch 而不是 ng-click 来获得所需的结果，但当按钮隐藏时，这对于非触摸设备不起作用。

Answer 1

您可以在执行代码之前检查屏幕分辨率。由于您使用的是 bootstrap xs 意味着所有屏幕都低于 768px ( http://getbootstrap.com/css/#grid )。

要检查在指令中添加 $window:

var windowWidth = $window.outerWidth;

if (windowWidth <= 768) {
   // Execute code
}