1

我正在开发一个项目，其中包含大量使用动态显示/隐藏的内容ng-show。一些被评估的表达式是冗长的。像这样的东西...

<div
  ng-show="some.object.with.nested.values
    && some.other.object.with.other.nested.values
    && also.looking.at.the.value.in.this.object
    && !obj.example.something.goes.here"
>...</div>

我需要使此内容符合 ADA WCAG 2.0。作为这项工作的一部分，我正在aria-disabled为所有隐藏内容添加属性。该aria-disabled属性将有一个true或false值。因此，如果内容隐藏，则aria-disabled属性将为true，如果内容可见，则属性将为false。换句话说，它总是ng-show值的倒数，它需要随着ng-show属性值的变化而动态更新。

出于明显的原因（例如可维护性、可读性、减少膨胀等），我想避免重复代码并用爆炸来反转每个值，就像这样......

<div
  ng-show="some.object.with.nested.values
    && some.other.object.with.other.nested.values
    && also.looking.at.the.value.in.this.object
    && !obj.example.something.goes.here"
 aria-disabled="!some.object.with.nested.values
    && !some.other.object.with.other.nested.values
    && !also.looking.at.the.value.in.this.object
    && obj.example.something.goes.here"
>...</div>

我宁愿做这样的事情......

<div
  ng-show="some.object.with.nested.values
    && some.other.object.with.other.nested.values
    && also.looking.at.the.value.in.this.object
    && !obj.example.something.goes.here"
 aria-disabled="{{invertNgShow(this)}}"
>...</div>

这个想法是使用自定义invertNgShow函数来获取元素ng-show属性的布尔值，反转值并返回。不用说，我还没有一个可行的解决方案。

提前致谢。

4

2 回答 2

1

最终，我最终为此创建了一个指令......

myApply.directive('ngAria', function ($compile) {
  return {
    restrict: 'A',
    replace: false, 
    priority: 1000,
    link: function postLink(scope, elem, attrs) {  
        elem.removeAttr("ng-aria");
        scope.$watch(attrs.ngShow, function(){
          elem.attr('aria-hidden', !scope.$eval(attrs.ngShow));  
        });
      }
    };
});

... HTML 看起来像这样...

<div ng-show="some.object.value" ng-aria >...</div>

如您所见，该指令获取 的值ng-show，对其进行反转，添加一个aria-hidden属性并将反转ng-show后的值应用于该属性。完美，而且标记少得多。

于 2014-06-12T18:19:18.630 回答
1

由于 ngShow 接受表达式。只需将计算值分配给变量并在控制器中的任何位置使用它，如下所示，

  v1: <input type="checkbox" ng-model="v1">
  v2: <input type="checkbox" ng-model="v2">
  v3: <input type="checkbox" ng-model="v3">
  ng-show: <input type="checkbox" ng-model="v123" disabled>
  <p ng-show="(v123 = (v1 && v2 && v3))" aria-disabled="{{!v123}}">Hello {{name}}!</p>

演示：http ://plnkr.co/edit/jg56QFsV6ohLu59EPS2H?p=preview

于 2014-06-06T06:33:50.180 回答