Question

div上的AngularJS ng-disable禁止在IE上滚动

我有一个很长的字母列表，希望将其滚动。但是，当用户仅具有查看权限时，div设置为禁用，因此他们无法进行任何更改。在Chrome上可以正常运行，但是在IE（v11.0.120）上，滚动条被禁用，因此用户除了前几个项目外看不到其他任何内容。

禁用标记是通过基于用户凭据的指令添加的。如果用户甚至没有查看权限，则将ng-show设置为false，并且该指令完全不会出现。

我尝试的第一个解决方案是尝试通过添加ng-disabled=false来覆盖子状态，但这无济于事。

第二个解决方案（在技术上可行）是切换元素的顺序，以便滚动div在权限阻止程序之外。这样做的问题是，如果没有权限的用户足够聪明地打开开发人员工具，他们仍然可以看到上面包含数据的wrapper元素。尽管他们一开始不应该能够导航到该页面，但我还是希望找到其他解决方案。

这是布局的（非常）简化版本，并且是指向jsfiddle的链接。

<div ng-app ng-controller="EmpCtrl">
    <div class="title">Employee Information</div>
    <div>{{employee.firstName}} {{employee.lastName}}</div>
    <div class="permissionBlocker" ng-disabled='true'>
    <div class="wrapper" data-employee-number="employee.Id">
      <div id="container">
        <ul>
          <li>Letter 1</li>
          <li>Letter 2</li>
          <li>Letter 3</li>
          <li>Letter 4</li>
          <li>Letter 5</li>
          <li>Letter 6</li>
          <li>Letter 7</li>
          <li>Letter 8</li>
          <li>Letter 9</li>
          <li>Letter 10</li>
          <li>Letter 11</li>
          <li>Letter 12</li>
          <li>Letter 13</li>
          <li>Letter 14</li>
          <li>Letter 15</li>
        </ul>
      </div>
    </div>
    </div>
</div>

Answer 1

我刚刚遇到了一个非常相似的问题。这取决于每个浏览器如何解释div中的disabled属性（包括使用ng-disabled设置了disable属性）。 Chrome似乎更宽容，而IE只是... IE。查看您的示例，您要基于权限阻止程序div启用或禁用该列表。您可以使用计划用来设置范围属性的任何逻辑，即$scope.permissionDenied = true 然后在相关元素上使用ng-class="{'disabled' : permissionDenied}"。根据您是否使用引导程序以及随后可能需要应用css样式的元素，例如：

.disabled {
    pointer-events:none; //This makes it not clickable
    opacity:0.6;         //This grays it out to look disabled
}

或者您可以使用ng-show="!permissionDenied"。有很多选项，但关键是不需要在div上设置禁用的属性。

<div>上的PermissionBlocker类禁用IE上的滚动

div上的AngularJS ng-disable禁止在IE上滚动

1 个答案: