如何仅在设备处于 xs 视图时添加点击处理程序？

Question

我有一个 table，在每行的第三个单元格中有一个按钮。 button/cell 隐藏在 xs 视图中，使用 twitter-bootstrap。这是示例的一个插件：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>'
  };
});

你可以看到当window缩小时第三个单元格被隐藏了。此时，整个 TABLE 行需要变为可点击。

我的问题是 "How can I make the table row clickable only when the device is in xs view?" 我现在最好的想法是使用两个不同的 table 来完成这项工作。

我认为我可以在 table 行中使用 ng-touch 而不是 ng-click 来获得预期的结果，但是当按钮被隐藏时，这不适用于非触摸设备。

Answer 1

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

要检查在您的指令中添加 $window：

var windowWidth = $window.outerWidth;

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

Answer 2

而不是 controller 使用 link，这样您就可以定位 elem。现在，当用户单击该行时，仅当按钮隐藏时标签才会出现（意味着用户处于移动视图中）。为此，我们检测按钮是否可见。

使用此方法，可以在您的 CSS 文件中设置网格宽度，因此您的设计问题不会泄漏到您的 JavaScript 代码中。所以你永远不必更新 JS 代码来设置新的宽度。

.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 was triggered!');
        } else {
            console.log('Row click event was triggered, but we did nothing, because the button is visible and accessible.');
        }
      };

      scope.clickbutton = function (){
        alert('Button click was triggered!');
      };
    }
  };

如何仅在设备处于 xs 视图时添加点击处理程序？

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

javascript

jquery

twitter-bootstrap

angularjs

angularjs-ng-click