Question

我有一张桌子

<table>
   <tr>
      <td>Some</td>
      <td>Some</td>
      <td>Some</td>
      <td><a href="#" class="btn">Go Btn</td>
   </tr>
</table>

在小型设备上，我想隐藏按钮并在所有标签上建立链接。

所以我需要像

这样的东西

<table>
   <tr ng-click="if(window.width()<480) window.location.href=url.html">
      ...
   </tr>
</table>

我需要为很多表实现这种情况。那么我可以在ng-click derictive的某个地方做这个逻辑吗？也许我需要扩展它或创建新的？

请用Angular Way向我推荐好的解决方案。感谢名单

Answer 1

您可以在控制器中执行，但需要使用$window服务：

app.controller("myCtrl", ["$scope", "$window", function($scope, $window){
    $scope.myFunction = function(){
        if($window.document.body.clientWidth < 480){
            // ...
        }
    };
}]);

ng-click="myFunction()"

或创建自定义指令。

或者只需使用 CSS @media 宽度检查来隐藏此元素并在没有ng-click的情况下显示anoter。

等

Answer 2

如果你想要一个指令解决方案，Css很好试试这个

<div ng-style="showbtnornot()" buttondirective>

这将是指令，这不是100％准确但它应该给你的想法

.directive('buttondirective', function (Ls, window) {
      return function (scope, element, attr, window) {
          scope.showbtnornot= function () {
             if(window.innerWidth < 400){
            return {
                'display': 'none',

            };
        } else {

            return {
                'display': 'block',

            };
        }
    }
}
})

AngularJS ng-仅点击小分辨率

2 个答案: